react: onClick broken on iOS.

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>

About this issue

  • Original URL
  • State: closed
  • Created 11 years ago
  • Comments: 19 (5 by maintainers)

Commits related to this issue

Most upvoted comments

* {cursor: pointer;} is the least offensive way to do this, IMO

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.

<div onTouchStart={() => alert('hi')} onTouchTap={() => alert('hi')} onClick={() => alert('hi')} style={{ padding: '16px', color: 'black', fontSize: '25px', cursor: 'pointer' }}> Click me! </div>

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…