CODEWITHSUNDEEP
reactjs
HTM Hell
HTM Hell

Reputation: 233

React Click events not firing on mobile

I've been working with react for a couple of months now, but have just run into something a little weird.

Click events aren't being fired at all on mobile devices:

http://jsbin.com/morarewelu/1/edit?html,js,output

http://jsbin.com/morarewelu/1/ - Check on your device

You can see that the click is never fired. Testing on iphone here.

Is this expected behaviour, or simply a bug?

Upvotes: 23

Views: 63604

Answers (3)

brienna
brienna

Reputation: 1604

I have the same issue, where I need to double click to get any click event to fire. It's not limited to Safari. I was able to overcome this by using onMouseDown and onMouseUp instead - which works on both mobile and desktop - but this is not always convenient. I would like to know why this is happening and how to solve it in a better way.

Upvotes: 2

Vijay Singh Kholiya
Vijay Singh Kholiya

Reputation: 413

I had the same issue when using Chrome browser, but when I used Firefox the onClick handler was working fine and thus the issue was in Chrome because chrome made some breaking changes for handling touches and because I was preventing default and handling it myself it wasn't working. Try running in Firefox it will work.

Upvotes: 1

Sanket Sahu
Sanket Sahu

Reputation: 8568

There are a few issues in React's Github project which might be helpful.

Looks like, you need to add a CSS cursor:'pointer' so that mobile phones (iOS devices specifically) fire native click event on the element.

Upvotes: 48

Related Questions