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.

Author: Tienchai

src/browser/eventPlugins/TapEventPlugin.js

@@ -62,13 +62,15 @@ var dependencies = [
  topLevelTypes.topMouseUp
 ];
 
+var touchDependencies = [
+ topLevelTypes.topTouchStart,
+ topLevelTypes.topTouchCancel,
+ topLevelTypes.topTouchEnd,
+ topLevelTypes.topTouchMove
+];
+
 if (EventPluginUtils.useTouchEvents) {
- dependencies.push(
- topLevelTypes.topTouchCancel,
- topLevelTypes.topTouchEnd,
- topLevelTypes.topTouchStart,
- topLevelTypes.topTouchMove
- );
+ dependencies = dependencies.concat(touchDependencies);
 }
 
 var eventTypes = {
@@ -81,6 +83,10 @@ var eventTypes = {
  }
 };
 
+var usedTouch = false;
+var usedTouchTime = 0;
+var TOUCH_DELAY = 500;
+
 var TapEventPlugin = {
 
  tapMoveThreshold: tapMoveThreshold,
@@ -103,6 +109,17 @@ var TapEventPlugin = {
  if (!isStartish(topLevelType) && !isEndish(topLevelType)) {
  return null;
  }
+ // on ios, there is a delay after touch event and synthetic
+ // mouse events, so that user can perform double tap
+ // solution: ignore mouse events following touchevent within small timeframe
+ if (touchDependencies.indexOf(topLevelType) !== -1) {
+ usedTouch = true;
+ usedTouchTime = Date.now();
+ } else {
+ if (usedTouch && (Date.now() - usedTouchTime < TOUCH_DELAY)) {
+ return;
+ }
+ }
  var event = null;
  var distance = getDistance(startCoords, nativeEvent);
  if (isEndish(topLevelType) && distance < tapMoveThreshold) {