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.

t.niese · Accepted Answer · 2014-12-16 08:44:43Z

4

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.

answered Dec 16, 2014 at 8:44

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pavel Antolík Over a year ago

Thank you! I removed e.preventDefault() (and updated a list of events a bit) and now I have the same results as the Mozilla tool. Gotta read some more on e.preventDefault() behavior though.

t.niese Over a year ago

@PavelAntolík Unfortunately I currently don't know a reference that describes how preventDefault affects other events. [...]but as a result it will also prevent certain other event to occur. might be a bit misleading. It might prevent a behavior of the browser and this behavior might have other events as an result. The click event on touch devices is a emulated event, and if you prevent a touch event, the default behavior of emulating the click is prevented. But honestly I don't know whether the emulation this is covered by a standard nor if preventDefault should prevent that.

Bergi · Accepted Answer · 2014-12-16 08:54:30Z

0

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

answered Dec 16, 2014 at 8:54

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

3 Comments

Pavel Antolík Over a year ago

Yes, I know that. But my test tool doesn't show even the events i DID bind (eg. click)..

Bergi Over a year ago

Ah, and you use a touch device (clicking with a mouse works well). In that case, your e.preventDefault() (as noted by @t.niese) on the touchend (similar to mouseup) does prevent the click action.

Pavel Antolík Over a year ago

Yup, I'm testing it on about 8 devices including smartphones, tablets, hybrids (tablet with keyboard & mouse) and desktop. Hooray for device diversity -_- Anyway, thank you for the quick response!

Collectives™ on Stack Overflow

Difference between pointer events binding in jQuery and plain Javascript

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related