Difference between pointer events binding in jQuery and plain Javascript

Question

I've been trying to understand how different pointer events (touch, mouse) are fired in various browsers/on various devices. On that purposed I have written a tiny webpage for testing events http://tstr.29pixels.net.

A few weeks later I've run into Mozilla's event listener test page at http://mozilla.github.io/mozhacks/touch-events/event-listener.html, which produced a very different results (I saw events fired that wasn't showing in my original test tool).

Both websites use different style of binding events, so I'd love to know, where is the difference in binding those events?

For example, pick up your tablet / smartphone with Chrome and try clicking the button on my web. In most cases two events are fired - touchstart and touchend (with occasional touchmove). Then try the Mozilla's tool. There is much more (even including click).

My binding:

$("#button").on('mouseenter mouseleave ... mousemove click', function(e){ 
   ... 
}

Mozilla binding:

var events = ['MSPointerDown', 'MSPointerUp', ... , 'MSPointerCancel'];
var b = document.getElementById('button');
for (var i=0; i<events.length; i++) {
   b.addEventListener(events[i], report, false);
}

These are just the most important parts, full javascript code is written right in the index page of both websites (it's not long).

If anyone could bring some light into this matter for me, I'd be very grateful.

Answer 1

jQuery also uses addEventListener internally. Depending on the event there might be some mapping or internal tweaks done by jQuery.

But the main difference between your code and the one of Mozilla is that you call e.preventDefault(); in your callback method, but Mozilla does not prevent the default behavior for the event.

Calling e.preventDefault(); will not only prevent the default behavior but as a result it will also prevent certain other event to occur. e.g. if you prevent mousedown or mousemove no dragevent will occur.