Clicking next to elements on touch devices only fires mouse events

When one clicks on an element on a touch device, both touch and mouse events are fired. But when one clicks closely next to the element (no matter whether an anchor or any other element), only mouse events are fired.

by lmeurs

HTML

<h1>Clicking next to elements on touch devices only fires mouse events</h1>

<p>When one clicks on an element on a touch device, both touch and mouse events are fired. But when one clicks closely next to the element (no matter whether an anchor or any other element), only mouse events are fired.</p>

<p>Tested on several Android devices (2.2, 2.3, 4.0, 4.4), Chrome for desktop emulating a mobile device and iOS 6.</p>

<p>
    <a class="link" href="#">Test link</a>
    <span class="link">Fake link</span>
</p>

<pre class="console"><b>Console:</b></pre>

<h2>Screenshot</h2>
<p>On the following screenshot you can see the events output in the console element when clicking on and close to the link elements.</p>
<p><img src="http://i.imgur.com/REC2KXx.png" /></p>

<p>Posted at <a href="http://www.html5rocks.com/en/mobile/touchandmouse/#disqus_thread">www.html5rocks.com/en/mobile/touchandmouse/</a>.</p>

<p>Also happens with <a href="https://github.com/toolkitchen/PointerEvents/tree/stable/samples/simple">Toolkitchen's PointerEvents polyfill</a> and <a href="http://ftlabs.github.io/fastclick/examples/layer.html">FastClick</a>.</p>

CSS

body {
    font: 12px sans-serif;
}

.link {
    display: inline-block;
    padding: 20px;
    background: yellow;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    www-margin-left: 50px;
    border: 1px dotted red;
}

pre {
    background: #eee;
}

JavaScript

$('.link').on({
    touchstart: myCallback,
    touchend: myCallback,
    mouseover: myCallback,
    mouseout: myCallback,
    click: myCallback
});

function myCallback(e) {
    $('.console').append('\n' + e.type);
    
    if (e.type === 'click') {
        e.preventDefault();
    }
}