javascript - jQuery 和普通 Javascript 中指针事件绑定(bind)的区别

Question

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

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

两个网站都使用不同风格的绑定(bind)事件，所以我很想知道，绑定(bind)这些事件的区别在哪里？

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

我的绑定(bind):

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

Mozilla 绑定(bind):

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 代码写在两个网站的索引页面中(不长)。

如果有人能为我解决这个问题，我将不胜感激。

Answer 1

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

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

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