mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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.
This commit is contained in:
committed by
Paul O’Shannessy
parent
1c241b3ebc
commit
ff12423d63
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user