Fixing touch/mouse issues with TapEventPlugin
On ios device, browser simulates mouse events, but does that with a delay, because of double tap gesture. The problem is that TapEventPlugins listens to both types of events, so it fires twice Everytime there is a touch event, we should ignore mouse events that follow it. This way, we still respond to both mouse and touch events, just ignore the device generated ones.
Tienchai Wirojsaksaree committed
Oct 27, 2014 at 17:02 UTC
ff12423d639413c1934dfc2ff337b298952e99ef
1 file changed
+23
-6
src/browser/eventPlugins/TapEventPlugin.js
+23
-6
@@ -62,13 +62,15 @@ var dependencies = [
62
topLevelTypes.topMouseUp
63
];
64
65
+var touchDependencies = [
66
+ topLevelTypes.topTouchStart,
67
+ topLevelTypes.topTouchCancel,
68
+ topLevelTypes.topTouchEnd,
69
+ topLevelTypes.topTouchMove
70
+];
71
+
72
if (EventPluginUtils.useTouchEvents) {
66
- dependencies.push(
67
- topLevelTypes.topTouchCancel,
68
- topLevelTypes.topTouchEnd,
69
- topLevelTypes.topTouchStart,
70
- topLevelTypes.topTouchMove
71
- );
73
+ dependencies = dependencies.concat(touchDependencies);
74
}
75
76
var eventTypes = {
@@ -81,6 +83,10 @@ var eventTypes = {
83
}
84
};
85
86
+var usedTouch = false;
87
+var usedTouchTime = 0;
88
+var TOUCH_DELAY = 500;
89
+
90
var TapEventPlugin = {
91
92
tapMoveThreshold: tapMoveThreshold,
@@ -103,6 +109,17 @@ var TapEventPlugin = {
109
if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
110
return null;
111
}
112
+ // on ios, there is a delay after touch event and synthetic
113
+ // mouse events, so that user can perform double tap
114
+ // solution: ignore mouse events following touchevent within small timeframe
115
+ if (touchDependencies.indexOf(topLevelType) !== -1) {
116
+ usedTouch = true;
117
+ usedTouchTime = Date.now();
118
+ } else {
119
+ if (usedTouch && (Date.now() - usedTouchTime < TOUCH_DELAY)) {
120
+ return;
121
+ }
122
+ }
123
var event = null;
124
var distance = getDistance(startCoords, nativeEvent);
125
if (isEndish(topLevelType) && distance < tapMoveThreshold) {