question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

onClick broken on iOS.

See original GitHub issue

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>

Issue Analytics

  • State:closed
  • Created 10 years ago
  • Comments:19 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
rboycecommented, Jun 28, 2013

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

1reaction
tiaaaa123commented, Sep 21, 2016

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…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Button onclick event not working in iOS unless you go away ...
I've tried 10 solutions that I've found and none work. I have a form that can't just submit because it receives back data...
Read more >
onClick events on iOS 13 not working - Board Game Arena
How many games are broken on iOS 13? Apple updated their webkit and onClick events (ie tapping game element divs) is very flakey...
Read more >
Fix jQuery Click Event on Touch Devices (IOS) - Ahmad Shyk
If jQuery click event is not working on touch devices especially iPhone or iPad, the fix is quite simple. Lets say we have...
Read more >
HTML : onclick event is not working on ipad and tablet
HTML : onclick event is not working on ipad and tablet [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] HTML : onclick ...
Read more >
onclick not working on iPhone - WebDeveloper.com Forums
Click events don't work on iOS, you'd have to use the touchstart, touchmove and touchend events to work out if the users tapped...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found