Closed
Description
iOS Safari really doesn't want you clicking anything that's not an <a> tag. This is a known issue: http://stackoverflow.com/questions/5421659/html-label-command-doesnt-work-in-iphone-browser/6472181#6472181
The way you fix this is by putting an empty "onclick" attribute on nodes you wish to emit click events. Yep.
So presumably:
div({onClick: function(){alert('clicked');}}, 'click me');
should emit:
<div onclick>click me</div>
on iOS. Ensuring that the click event is actually reachable from an iOS device.
As the stack overflow link points out, this is also an issue for <label> elements associated with <input> elements. In order to behave as a clickable label, they must also include an empty "onclick" attribute.
label(null, input({type: 'checkbox'}), check me);
<label onclick><input type="checkbox> check me</label>
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
Milestone
Relationships
Development
No branches or pull requests
Participants
Activity
yungsters commentedon Jun 28, 2013
Is this only an issue with iOS4 and below? Can we just generate markup for every node with
onclick=""on the affected browsers?leebyron commentedon Jun 28, 2013
I think it affects modern iOS browsers as well.
leebyron commentedon Jun 28, 2013
style="cursor:pointer" also fixes this :)
vjeux commentedon Jun 28, 2013
Does it only happens for onClick or also for onTouchStart, onDblClick ...?
Does attaching an onClick event listener to the dom node fixes the issue?
Christopher "vjeux" Chedeau
Facebook Engineer
http://blog.vjeux.com/
On Jun 27, 2013, at 10:45 PM, Lee Byron notifications@github.com wrote:
rboyce commentedon Jun 28, 2013
* {cursor: pointer;}is the least offensive way to do this, IMOtomocchino commentedon Aug 14, 2013
I think this is fixed now, right @zpao @yungsters?
ewendel commentedon May 15, 2014
Still not fixed, I just spent an hour trying to figure out why this wasnt working..
sophiebits commentedon May 15, 2014
Sorry about that -- we have #1169 open now.
Fix iOS onClick issue
7 remaining items
uzarubin commentedon Oct 13, 2015
We are currently having this issue only on iOS 9. The workarounds work for other versions of iOS, just not the most recent one. Is anyone else experiencing this?
sophiebits commentedon Oct 13, 2015
@uzarubin Haven't heard of this. I just tested with http://react.jsbin.com/vovuzexiza/edit?html,js (http://react.jsbin.com/vovuzexiza) and it seems to work fine.
melbayad commentedon Oct 14, 2015
I'm currently using React v0.14.0 and still have the same issue (event click not firing) on Safari v8.0.6 and IE. I've added
cursor:pointerbut with no luck. can you please help me to make it work ?sophiebits commentedon Oct 14, 2015
This issue has been fixed. If you're seeing the wrong behavior from React still, please open a new issue with a minimal repro case.
Add `cursor: pointer; trick` to get clickable bins for React < 0.14
cursor: pointer; trickto get clickable bins for React < 0.14 concord-consortium/rigse#157Enables react interaciton on iOS
tiaaaa123 commentedon Sep 21, 2016
react: 15.1.0Still not working. I have the cursor: pointer as you can see. I triedonTouchStart,onTouchTapandonClickbut none is happening.When I'm on my website on an IPad and and my laptop the click on the IPad does nothing on the IPad, but it does on PC! The even seems to be triggered, but nothing is displayed on IPad....
stresslimit commentedon Feb 11, 2017
I love that this was still relevant to me today, thank you internet archives!