Attaching of onclick handler causes unexpected highlighting in Mobile Safari

[sophiebits]

@yungsters's recent commit 4deb0d6 makes onClick work in Mobile Safari by attaching an empty onclick handler on touchstart. However, this causes subtly different behavior from DOM events without React. Consider the JSX:

<div onClick={...}>
    <img src="a.png" />
    <img src="b.png" />
</div>

When an image is tapped, the onclick handler is attached to the image and so when the browser draws the light gray touch highlight, only the image is highlighted.

Compare with the HTML

<div onclick=...>
    <img src="a.png">
    <img src="b.png">
</div>

where the entire div is highlighted when clicking.

[jordwalke]

Does it sound like addressing this at the rendering layer is a reasonable approach? Whenever a React instance has an onClick handler, we can render its markup as <div onclick="function(){}" />.

[sophiebits]

Yes, I think that makes sense.

[yungsters]

@jordwalke Actually, I think an empty onclick="" would work in this case.

[syranide]

http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html

Apart from its ugliness, I see one problem with this approach: if my guess is right and
the Apple engineers have in fact disabled click event delegation because of memory
considerations, this workaround will create new memory problems. Lots of them if you
have lots of divs that must become clickable.

But that can’t be helped. Event delegation simply must work for the click event, and if
we have to brute-force it at the expense of memory that’s just too bad for Safari iPhone.

An alternative is to force cursor: pointer on Mobile Safari, since you can't see the cursor no one should care, it only has to exist for that element with a click-handler and it should keep us away from the issue above? I think? (It does have to play nice with style though, which might not be trivial?)