Difference between pointer event binding in jQuery and plain javascript

Question

I tried to understand how various pointer events (touch, mouse) are fired in different browsers / on different devices. On this I wrote a small web page for testing events http://tstr.29pixels.net .

A few weeks later I came across a Mozilla event listener test page at http://mozilla.imtqy.com/mozhacks/touch-events/event-listener.html , which produced completely different results (I saw the events that were fired, t in my original test tool).

Both websites use different binding styles, so I would like to know where is the difference in the binding of these events?

For example, grab your tablet / smartphone using Chrome and try clicking a button on my website. In most cases, two events are triggered - touchstart and touchhend (with random touch). Then try the Mozilla tool. There is much more (even including a click).

My binding:

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

Linking to Mozilla:

 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 only the most important parts, the full javascript code is written directly on the index page of both websites (this is not long).

If anyone could bring me light on this issue, I would be very grateful.

Answer 1

jQuery also uses addEventListener internally. Depending on the event, there may be some display or internal settings made by jQuery.

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

Call e.preventDefault(); not only prevents the default behavior, but as a result also prevents the occurrence of a specific other event. for example, if you prevent the mousedown or mousemove no drag event.

Answer 2

There is not much difference in how events are logged in the browser.

However, Mozilla simply binds its handler to events that you are not listening to. In particular, these are:

 MSGotPointerCapture MSLostPointerCapture MSPointerCancel blur focus gotpointercapture lostpointercapture pointercancel mousedown mouseup mouseout mouseover touchenter touchleave