jQuery mouseleave event always fires in IE11 when I tap via touch screen

Question

I am struggling with the jQuery mouseleave event on IE11 if I tap a link by touch screen. Every time I tap a link by touch, a mouseleave event fires afterwards, although I don't tap somewhere else. On Chrome and FF, it works fine as they reposition the actual cursor position whereas IE leaves it at the previous position.

See the following script - works on touchscreens in FF and Chrome, and by using the mouse. http://jsfiddle.net/daSL2/

Expected behaviour: The mouseleave event should only fire if I move away with the mouse or tap somewhere else by touch screen. (Tested on Lenovo Yoga 13)

JS:

    $(function () {
        $('a').on({
            click: function (e) {
                writeDebugText('click');
            },
            mousedown: function (e) {
                writeDebugText('mousedown');
            },
            mouseenter: function (e) {
                writeDebugText('mouseenter');
            },
            mouseleave: function (e) {
                writeDebugText('mouseleave');
            }
        });
    });

    var last = new Date();
    function writeDebugText(text) {
        var o = $('div.Debug');
        var now = new Date();
        var diff = now.getTime() - last.getTime();
        o.html(text + " @ " + diff + " <br /> " + o.html());
        last = now;
    }

HTML:

<a href="#" style="-ms-touch-action: none; touch-action: none;">Click me</a>

<hr />
<em>
   <div class="Debug"></div>
</em>

Thanks for your help!

this might be relevant, not so much the drag and drop stuff, but the event capturing stuff: http://stackoverflow.com/questions/5186441/javascript-drag-and-drop-for-touch-devices — chiliNUT, Jul 18 '14 at 01:47
thanks, but it didn't work. Or how would I need to implement the touchHandler so that mouseleave only fires if I move out or tap somewhere else? — Philippe, Jul 18 '14 at 08:44

jQuery mouseleave event always fires in IE11 when I tap via touch screen

0 Answers0