Skip to content

Commit 1a2e501

Browse files
author
Adam Bradley
committed
fix(tap): Normalize taps w/ pointer events also
Some browsers already remove the delay with certain settings, such as the CSS property `touch-events: none` or with specific meta tag viewport values. However, each of these browsers still handle clicks differently, such as when to fire off or cancel the event (like scrolling when the target is a button, or holding a button down). For browsers that already remove the 300ms delay, consider Ionic's tap system as a way to normalize how clicks are handled across the various devices so there's an expected response no matter what the device, platform or version. Additionally, Ionic will prevent ghostclicks which even browsers that remove the delay still experience.
1 parent ed3ee1d commit 1a2e501

File tree

1 file changed

+42
-6
lines changed

1 file changed

+42
-6
lines changed

Diff for: js/utils/tap.js

+42-6
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,15 @@
1515
* [fastclick](https://github.com/ftlabs/fastclick) and Angular's
1616
* [ngTouch](https://docs.angularjs.org/api/ngTouch) should not be included, to avoid conflicts.
1717
*
18+
* Some browsers already remove the delay with certain settings, such as the CSS property
19+
* `touch-events: none` or with specific meta tag viewport values. However, each of these
20+
* browsers still handle clicks differently, such as when to fire off or cancel the event
21+
* (like scrolling when the target is a button, or holding a button down).
22+
* For browsers that already remove the 300ms delay, consider Ionic's tap system as a way to
23+
* normalize how clicks are handled across the various devices so there's an expected response
24+
* no matter what the device, platform or version. Additionally, Ionic will prevent
25+
* ghostclicks which even browsers that remove the delay still experience.
26+
*
1827
* In some cases, third-party libraries may also be working with touch events which can interfere
1928
* with the tap system. For example, mapping libraries like Google or Leaflet Maps often implement
2029
* a touch detection system which conflicts with Ionic's tap system.
@@ -67,6 +76,7 @@ var tapPointerMoved;
6776
var tapPointerStart;
6877
var tapTouchFocusedInput;
6978
var tapLastTouchTarget;
79+
var tapTouchMoveListener = 'touchmove';
7080

7181
var TAP_RELEASE_TOLERANCE = 6; // how much the coordinates can be off between start/end, but still a click
7282

@@ -82,6 +92,16 @@ var tapEventListeners = {
8292
'touchcancel': tapTouchCancel,
8393
'touchmove': tapTouchMove,
8494

95+
'pointerdown': tapTouchStart,
96+
'pointerup': tapTouchEnd,
97+
'pointercancel': tapTouchCancel,
98+
'pointermove': tapTouchMove,
99+
100+
'MSPointerDown': tapTouchStart,
101+
'MSPointerUp': tapTouchEnd,
102+
'MSPointerCancel': tapTouchCancel,
103+
'MSPointerMove': tapTouchMove,
104+
85105
'focusin': tapFocusIn,
86106
'focusout': tapFocusOut
87107
};
@@ -94,9 +114,25 @@ ionic.tap = {
94114
tapEventListener('click', true, true);
95115
tapEventListener('mouseup');
96116
tapEventListener('mousedown');
97-
tapEventListener('touchstart');
98-
tapEventListener('touchend');
99-
tapEventListener('touchcancel');
117+
118+
if( window.navigator.pointerEnabled ) {
119+
tapEventListener('pointerdown');
120+
tapEventListener('pointerup');
121+
tapEventListener('pointcancel');
122+
tapTouchMoveListener = 'pointermove';
123+
124+
} else if (window.navigator.msPointerEnabled) {
125+
tapEventListener('MSPointerDown');
126+
tapEventListener('MSPointerUp');
127+
tapEventListener('MSPointerCancel');
128+
tapTouchMoveListener = 'MSPointerMove';
129+
130+
} else {
131+
tapEventListener('touchstart');
132+
tapEventListener('touchend');
133+
tapEventListener('touchcancel');
134+
}
135+
100136
tapEventListener('focusin');
101137
tapEventListener('focusout');
102138

@@ -314,7 +350,7 @@ function tapTouchStart(e) {
314350
tapEnableTouchEvents();
315351
tapPointerStart = getPointerCoordinates(e);
316352

317-
tapEventListener('touchmove');
353+
tapEventListener(tapTouchMoveListener);
318354
ionic.activator.start(e);
319355

320356
if( ionic.Platform.isIOS() && ionic.tap.isLabelWithTextInput(e.target) ) {
@@ -350,14 +386,14 @@ function tapTouchEnd(e) {
350386
function tapTouchMove(e) {
351387
if( tapHasPointerMoved(e) ) {
352388
tapPointerMoved = true;
353-
tapEventListener('touchmove', false);
389+
tapEventListener(tapTouchMoveListener, false);
354390
ionic.activator.end();
355391
return false;
356392
}
357393
}
358394

359395
function tapTouchCancel(e) {
360-
tapEventListener('touchmove', false);
396+
tapEventListener(tapTouchMoveListener, false);
361397
ionic.activator.end();
362398
tapPointerMoved = false;
363399
}

0 commit comments

Comments
 (0)