react: onTouchTap triggering handler twice

We’re using TapEventPlugin in our application and it calls every handler twice. Those calls are triggered by different events - first time by touchend, and second time by mouseup, which is generated by a browser as a click. This doesn’t make any sense, so I think TapEventPlugin should prevent triggering by a mouseup when event was triggered by touches.

Not sure if there is a good way. I guess calling e.preventDefault() inside of TapEventPlugin is not the wisest solution, is it?

About this issue

Original URL
State: closed
Created 10 years ago
Comments: 27 (14 by maintainers)

Most upvoted comments

I’m in the middle of debugging an issue in Chrome for Android where I’m getting a second touchtap on a different element after the first has dispatched. In my particular case, the second event is closing the modal the first event opened (so it looks to the user like nothing happens when you tap).

Here are the logs on Chrome for MacOS, Safari for iOS, and Chrome for Android. Interestingly, I am unable to replicate this issue in ChromeOS with a touchscreen - it is very Android-specific. Unfortunately, I don’t have the Chromebook handy to log with.

extractEvents: function(
    topLevelType,
    topLevelTarget,
    topLevelTargetID,
    nativeEvent) {
  // …
  console.log(arguments);
  console.log(event);
  // …
}


// Chrome 37.0.2062.120 on MacBook

["topMouseDown", img, ".1jmtvo16r5s.0.0.0", MouseEvent, callee: (...), caller: (...)]
null
["topMouseUp", img, ".1jmtvo16r5s.0.0.0", MouseEvent, callee: (...), caller: (...)]
SyntheticUIEvent {dispatchConfig: Object, dispatchMarker: ".1jmtvo16r5s.0.0.0", nativeEvent: MouseEvent, type: "mouseup", target: img…}


// Safari Mobile/12A365 on iOS 8

["topTouchStart", <img src="/static/generic/images/nav.svg" data-reactid=".4bwvosidc0.0.0.0">, ".4bwvosidc0.0.0.0", TouchEvent]
null
["topTouchEnd", <img src="/static/generic/images/nav.svg" data-reactid=".4bwvosidc0.0.0.0">, ".4bwvosidc0.0.0.0", TouchEvent]
SyntheticUIEvent


// Chrome 37.0.2062.117 on Android 4.4.99 LPV79

["topTouchStart", img, ".245z5a53cow.0.0.0", TouchEvent, callee: (...), caller: (...)]
null
["topTouchEnd", img, ".245z5a53cow.0.0.0", TouchEvent, callee: (...), caller: (...)]
SyntheticUIEvent {dispatchConfig: Object, dispatchMarker: ".245z5a53cow.0.0.0", nativeEvent: TouchEvent, type: "touchend", target: img…}
["topMouseDown", div.Scrim, ".245z5a53cow.1.0", MouseEvent, callee: (...), caller: (...)]
null
["topMouseUp", div.Scrim, ".245z5a53cow.1.0", MouseEvent, callee: (...), caller: (...)]
SyntheticUIEvent {dispatchConfig: Object, dispatchMarker: ".245z5a53cow.1.0", nativeEvent: MouseEvent, type: "mouseup", target: div.Scrim…}

img is the button the user is trying to tap. Scrim is an element that appears after the first tap to give the user a way to go back. It covers the entire screen behind the modal as soon as the button is tapped.

appsforartists on Sep 16, 2014

@piranha It also means you have to support touchevents for all components, you cannot fallback in places you don’t care.

syranide on Aug 20, 2014