onClick vs onTouchTap, what should I use?

Question

What should I use between onClick and onTouchTap ? And why ? onTouchTap seems sometimes too easy to trigger (while scrolling for example). Am I wrong ? Is there any browser issue with one or the other ?

Answer 1

It looks like onTouchTap is something that react-tap-event-plugin provides as a way to overcome 300ms delay that occurs for onClick handlers on iOS. If you do not care about 300ms delay on iOS browsers it might make sense to use regular onClick handlers to avoid possible ghost clicks that are mentioned in this plugin's docs.

Answer 2

While Ianan's answer probably reflected the best course of action at the time it was written, others visiting this thread after mid-August of 2017 should be wary that there are some updates to this. Depending on the browsers you need to support and the dependencies in your applications, onTouchTap may no longer be relevant to your needs.

As can be seen from the CHANGELOG for Material-UI v0.19.0, the react-tap-event-plugin dependency has been removed from versions 0.19.0+ of Material-UI. As noted here, this was done in an effort toward supporting React v16 (a.k.a., "Fiber"). Additionally, mobile devices' browsers have seen marked improvements since then, meaning the ghost click effect is (at least, in many cases) no longer noticeable or present.

Overall, evaluate your stack. If you are only building with evergreen browsers in mind, have upgraded to React v16 and are on a recent version of Material-UI, use of onTouchTap instead of onClick is likely not for you. Additionally, Facebook (in particular, its React team) does not plan on supporting tap events and nor does it seem this will be a long-term issue in major browsers going forward; in that vein, if your application can afford to upgrade its infrastructure (i.e., core dependencies) it should.