hoverTap

Quick fix to use hover (mouseenter / mouseleave) on touch devices. Since we cancel events completely on selected elements, users cannot touch scroll, pinch, etc. from these elements.

by lmeurs

HTML

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

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

CSS

body {
    font: 12px sans-serif;
}

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

.link.hovered {
    background: yellow;
}

pre {
    background: #eee;
}

JavaScript

$('.link').on({
    click: myCallback,
    touchstart: myCallback,
    mouseenter: myCallback,
    mouseleave: myCallback,
});

$('.console').click(function(e) {
    $(this).find('div').empty();
});

function myCallback(e) {
    $('.console').find('div').append('\n' + e.type);

console.log(e);

    e.stopPropagation();
    e.preventDefault();

    if (e.type === 'touchstart') {
        $(this).toggleClass('hovered');
    }
    else if (e.type === 'mouseenter') {
        $(this).addClass('hovered');
    }
    else if (e.type === 'mouseleave') {
        $(this).removeClass('hovered');
    }
}