click event listeners attached to document.body dont fire in iOS6?

Question

Experiencing strange behaviour and non functioning event delegation in iOS6, the root of which is that if I simply attach an event handler to document.body, as so:

document.body.addEventListener("click", function(){alert("ios6 sucks")}, false);

this doesnt get run, for example if I go to google.com and add that via safari remote webinspector. In some cases it will run, including if I click on a link on the page, or if clicking on an element that has an event handler attached directly to it. The same works fine in major browsers and on iOS 5 and 4. Adding touchend to body will trigger as it should and could be a potential workaround but it is really preferable to let the browser detect clicks instead of having to program some click detection in touchstart/touchend. Am wondering if this is an iOS6 bug. but I havent seen anyone else complain about this yet.

Answer 1

@Bonkers... Referencing why the body click gets triggered after attaching the click event to the div is solely due to event bubbling.

I replicated your code here showing that it gets called twice on the div but only once on the body:

<div id="myDiv">FlackAttack Test</div>

<script>
document.body.addEventListener("click", function(){alert("ios6 sucks")}, false);
document.getElementById('myDiv').addEventListener('click', function(){alert("ios6 sucks twice")},      false);
</script>

If you wanted to stop the event from bubbling, you could call e.stopPropagation(); or e.cancelBubble = true;

Answer 2

Faced the same problem. The following helped (omitting.body):

document.addEventListener("click", function(){alert("ios6 sucks")}, false);