From e6811b21347c571cc6432bc32e89ea465c0273ef Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Tue, 15 Mar 2016 13:19:43 -0700 Subject: [PATCH] [fix] ResponderEventPlugin: touch or mouse dependencies **Problem** Browsers tend to fire both touch and mouse events when touch is supported. This causes touchables to fire responder callbacks twice. For example, 'TouchableOpacity' will animate the opacity twice in response to a touch. **Response** If a browser supports touch, don't include the mouse events as dependencies of the responder events. This is not ideal, as some devices support both touch and mouse interactions. This will need to be revisited. --- src/apis/PanResponder/injectResponderEventPlugin.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/apis/PanResponder/injectResponderEventPlugin.js b/src/apis/PanResponder/injectResponderEventPlugin.js index 5df6619e..0271cc9d 100644 --- a/src/apis/PanResponder/injectResponderEventPlugin.js +++ b/src/apis/PanResponder/injectResponderEventPlugin.js @@ -18,9 +18,11 @@ const { topTouchStart } = EventConstants.topLevelTypes -const endDependencies = [ topMouseUp, topTouchCancel, topTouchEnd ] -const moveDependencies = [ topMouseMove, topTouchMove ] -const startDependencies = [ topMouseDown, topTouchStart ] +const supportsTouch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch + +const endDependencies = supportsTouch ? [ topTouchCancel, topTouchEnd ] : [ topMouseUp ] +const moveDependencies = supportsTouch ? [ topTouchMove ] : [ topMouseMove ] +const startDependencies = supportsTouch ? [ topTouchStart ] : [ topMouseDown ] /** * Setup ResponderEventPlugin dependencies @@ -42,7 +44,7 @@ const originalRecordTouchTrack = ResponderTouchHistoryStore.recordTouchTrack ResponderTouchHistoryStore.recordTouchTrack = (topLevelType, nativeEvent) => { // Filter out mouse-move events when the mouse button is not down - if ((topLevelType === 'topMouseMove') && !ResponderTouchHistoryStore.touchHistory.touchBank.length) { + if ((topLevelType === topMouseMove) && !ResponderTouchHistoryStore.touchHistory.touchBank.length) { return } originalRecordTouchTrack.call(ResponderTouchHistoryStore, topLevelType, normalizeNativeEvent(nativeEvent))