jQuery和纯Javascript中的指针事件绑定之间的区别

Difference between pointer events binding in jQuery and plain Javascript

本文关键字：绑定 之间 区别 事件 指针 Javascript jQuery 和纯      更新时间：2023-09-26

我一直在尝试了解不同的指针事件(触摸、鼠标(如何在各种浏览器/各种设备上触发。为此，我写了一个小网页来测试 http://tstr.29pixels.net 事件。

几周后，我在 http://mozilla.github.io/mozhacks/touch-events/event-listener.html 遇到了Mozilla的事件侦听器测试页面，它产生了非常不同的结果(我看到触发的事件没有显示在我原来的测试工具中(。

两个网站都使用不同风格的绑定事件，所以我很想知道，绑定这些事件有什么区别？

例如，使用 Chrome 拿起您的平板电脑/智能手机，然后尝试点击我网站上的按钮。在大多数情况下，会触发两个事件 - touchstart 和 touchend(偶尔会触发 touchmove(。然后尝试Mozilla的工具。还有更多(甚至包括点击(。

我的绑定： 

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

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);
}

这些只是最重要的部分，完整的javascript代码直接写在两个网站的索引页中(不长(。

如果有人能为我带来一些光明，我将不胜感激。

jQuery也在内部使用addEventListener。根据事件的不同，jQuery可能会进行一些映射或内部调整。

但是你的代码和Mozilla的代码之间的主要区别在于，你在回调方法中调用e.preventDefault();，但Mozilla不会阻止事件的默认行为。

调用e.preventDefault();不仅会阻止默认行为，而且还可以防止某些其他事件的发生。 例如，如果您阻止mousedown或mousemove则不会发生drag事件。

事件在浏览器中的注册方式没有太大区别。

但是，Mozilla 只是将其处理程序绑定到您不侦听的事件。具体来说，这些是：

MSGotPointerCapture MSLostPointerCapture MSPointerCancel
blur focus
gotpointercapture lostpointercapture pointercancel
mousedown mouseup
mouseout
mouseover
touchenter touchleave
相关文章：