CODEWITHSUNDEEP
javascriptreactjs
dingdingding
dingdingding

Reputation: 1581

Override React OnClick event for 300ms delay

In a React app I have several components which implement onClick handlers. The problem is I'm deploying to Safari on an Ipad, so there is a 300ms delay on click. What is the best way to remove this delay? Is it possible to override React onClick listener or something similar? I'm aware of several repo's trying to fix this but I can't add new methods, I just need the original onClick to work. Also I'm aware of react-fastclick but it doesn't work with React 0.14

Upvotes: 3

Views: 4787

Answers (1)

Leah Zorychta
Leah Zorychta

Reputation: 13449

The 300ms delay is a javascript thing in general that mobile devices have. This link tells you a ton of ways to get around it. I've had great success listening for touchend events instead of click because touch events have no delay.

Other workarounds include:

  1. Disable Zooming (Chrome and Firefox) by adding a meta tag <meta name="viewport" content="width=device-width, user-scalable=no">

  2. Set the viewport to the device-width (Chrome 32+) <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3">

  3. use this non-standard PointerEvents workaround (for IE)

    a, button, .myelements { -ms-touch-action: manipulation; /* IE10 / touch-action: manipulation; / IE11+ */ }

Upvotes: 2

Related Questions