Leeish Leeish - 27 days ago 7x
HTML Question

touch events not firing on anchor with no href

Consider the following:

<a class="addThing">link</a>


On my iPhone I couldn't get a click event to fire on this anchor until I added
to the anchor. The anchor was added to the DOM after the page load. I'm able to recreate this by using JS to add an anchor to the DOM and confirmed it doesn't register the click, but if I added it on page load it does.

This suggests that the phone/browser/OS is somehow treating the elements differently if loaded to the DOM via javascript, but it's the same HTML.

I have a few questions:

  1. Why does the href need to be there for the click event to fire.

  2. Is there another method to get the event to register? (I was thinking something to do with tab index or something like that.)

  3. Is this specific to OS/Device/Browser/Platform or is this something working as it should per W3C documentation?

  4. Is
    the same as
    . I came across the
    thing while researching this and I've always just done


Per http://www.quirksmode.org/blog/archives/2010/10/click_event_del_1.html
Answer to 1,2 & 3 apparently because the
in turn adds the CSS styling of
cursor: pointer
it makes it magically work. I don't have an android device to test.

Answer to #4 is apparently, it's 2016. Not sure what that means.

//use following css for a 

a {cursor:pointer;}