onClick broken on iOS.
See original GitHub issueiOS 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:
- Created 10 years ago
- Comments:19 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
* {cursor: pointer;}
is the least offensive way to do this, IMO
<div onTouchStart={() => alert('hi')} onTouchTap={() => alert('hi')} onClick={() => alert('hi')} style={{ padding: '16px', color: 'black', fontSize: '25px', cursor: 'pointer' }}> Click me! </div>react: 15.1.0
Still not working. I have the cursor: pointer as you can see. I triedonTouchStart
,onTouchTap
andonClick
but 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…