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>
leebyron
All 19 comments
Is this only an issue with iOS4 and below? Can we just generate markup for every node with onclick="" on the affected browsers?
yungsters
on 28 Jun 2013
I think it affects modern iOS browsers as well.
leebyron
on 28 Jun 2013
style="cursor:pointer" also fixes this :)
leebyron
on 28 Jun 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 [email protected] wrote:
style="cursor:pointer" also fixes this :)
—
Reply to this email directly or view it on GitHub.
vjeux
on 28 Jun 2013
* {cursor: pointer;} is the least offensive way to do this, IMO
rboyce
on 28 Jun 2013
I think this is fixed now, right @zpao @yungsters?
tomocchino
on 15 Aug 2013
Still not fixed, I just spent an hour trying to figure out why this wasnt working..
ewendel
on 15 May 2014
Sorry about that -- we have #1169 open now.
sophiebits
on 15 May 2014
This is still an issue in 0.13.3.
mietek
on 26 Jul 2015
It's fixed in 0.14 beta and will be in the final 0.14 as well.
sophiebits
on 26 Jul 2015
The <a> without href attribute but with onClick event doing the navigation is not working across all kinds of browsers in iOS platform. (I test 4 of them in iOS 8.4.1 :)
But if we put a styling cursor:pointer for <a>, it will bypass iOS' restriction of the press and hold copy and paste text mechanics.
shuson
on 1 Sep 2015
Just had the same problem with an onClick event on an overlay that was suppose to dismiss a menu when clicked or tapped. Changing the style to cursor: pointer like @shuson said worked, but it shouldn't be required.
yagudaev
on 8 Sep 2015
As I said, this is fixed in 0.14 which will be released soon.
sophiebits
on 8 Sep 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?
uzarubin
on 13 Oct 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.
sophiebits
on 13 Oct 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:pointer but with no luck. can you please help me to make it work ?
melbayad
on 15 Oct 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.
sophiebits
on 15 Oct 2015
react: 15.1.0 Still not working. I have the cursor: pointer as you can see. I tried onTouchStart, onTouchTap and onClick but none is happening.
onTouchTap={() => alert('hi')}
onClick={() => alert('hi')}
style={{ padding: '16px', color: 'black', fontSize: '25px', cursor: 'pointer' }}>
Click me!
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....
tiaaaa123
on 21 Sep 2016
I love that this was still relevant to me today, thank you internet archives!
stresslimit
on 11 Feb 2017
Related issues
hnordt
·
3Comments
krave1986
·
3Comments
trusktr
·
3Comments
zpao
·
3Comments
varghesep
·
3Comments
Most helpful comment
* {cursor: pointer;}is the least offensive way to do this, IMO