Safari not firing touch events

Question

I've got a small jsfiddle - http://jsfiddle.net/qhguktsn/5/. When you tap the text at the top of the link (iOS mobile Safari), you get only the mouse events- no touch events at all, not even on the body. If you tap it on the bottom of the text, you get touch events. We depend on touch events for handling 300ms delay.

How can we get touch events for tapping on the top of the text as well as the bottom?

HTML:

<div style="margin-left:200px;margin-top:200px">
    <a style="vertical-align:center;height: 20px, width: 20px;font-size:100px" href="javascript: void 0">text</a>
</div>

JS:

jQuery("a").on("mousedown", function() { document.body.appendChild(document.createTextNode("mousedown ")); });
jQuery("a").on("mouseup", function() { document.body.appendChild(document.createTextNode("mouseup ")); });
jQuery("a").on("touchstart", function() { document.body.appendChild(document.createTextNode("touchstart ")); });
jQuery("a").on("touchend", function() { document.body.appendChild(document.createTextNode("touchend ")); });
jQuery("a").on("click", function() { document.body.appendChild(document.createTextNode("click ")); });

jQuery(document.body).on("touchstart", function() { document.body.appendChild(document.createTextNode("body touchstart ")); });
jQuery(document.body).on("touchend", function() { document.body.appendChild(document.createTextNode("body touchend ")); });

Answer 1

This is know bug in Mobile Safari. https://bugs.webkit.org/show_bug.cgi?id=105406 There is another one as well with adding node form different document. https://bugs.webkit.org/show_bug.cgi?id=135628

In order to fix them there are several ways.

• The first one is to use a small library called fastclick, which supports many mobile devices and OS.

• The second options is to add event.stopPropagation(); event.preventDefault(); like that. You need both of them.

  jQuery("a").on("mousedown", function(event) {
      event.stopPropagation();
      event.preventDefault();
      document.body.appendChild(document.createTextNode("mousedown ")); 
  });
  

• The third option is by using the viewport meta tag like that <meta name="viewport" content="width=device-width, user-scalable=no">. This will eliminate all touch delays, without any workarounds. But, again on Safari it may not act like in the other browsers, because hey Safari is the new IE

There is also touch-action, but it's not supported in most of the mobile browsers. :(