0

I am building a card game as a web app that involves clicking cards as fast as possible. I am using ReactJS (although I don't think that's too relevant) and set an onClick function on the card <div> to select it.

However, often times the click does not successfully register, especially on mobile devices. I believe what is going on is that sometimes the clicks are registered as tiny drags instead, as dragging the card does nothing.

How do I make the clicks more responsive and avoid this problem? For instance, registering the drags as clicks somehow might be a solution, although I don't know how to do that.

HatTricks
  • 221
  • 2
  • 6
  • 1
    This might help you out. https://hammerjs.github.io/ It's Hammer Time! Or this one: https://github.com/zilverline/react-tap-event-plugin – Matt Jun 07 '17 at 01:00
  • 2
    See also https://stackoverflow.com/questions/12238587/eliminate-300ms-delay-on-click-events-in-mobile-safari – le_m Jun 07 '17 at 01:00
  • 1
    Adding onTap from Hammer Time may get rid of the 300 ms delay, but sometimes when I click a card my iPad thinks I want to scroll the entire page up/down. Also, on desktop, the mouse sometimes drags away an image inside the card
    instead.
     – HatTricks Jun 07 '17 at 02:01

0 Answers0