CODEWITHSUNDEEP
javascriptjqueryevents
Pavel Antolík
Pavel Antolík

Reputation: 63

Difference between pointer events binding in jQuery and plain Javascript

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.

Upvotes: 6

Views: 253

Answers (2)

Bergi
Bergi

Reputation: 664548

There's not much difference in how events are registered with the browser.

However, Mozilla just binds its handler to events that you don't listen to. Specifically, these are:

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

Upvotes: 0

t.niese
t.niese

Reputation: 40842

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.

Upvotes: 4

Related Questions