在jQuery和普通Javascript中绑定指针事件之间的区别

Question

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

几个星期后，我在http://mozilla.github.io/mozhacks/touch-events/event-listener.html上遇到了Mozilla的事件监听器测试页面，这产生了一个非常不同的结果（我看到事件被解雇了在我原来的测试工具中显示。

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

例如，使用Chrome购买平板电脑/智能手机，然后点击我网络上的按钮。 在大多数情况下，会触发两个事件 - touchstart和touchend（偶尔触摸移动）。 然后尝试使用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代码写在两个网站的索引页面（它不长）。

如果有人能为我带来一些亮点，我会非常感激。

Answer 1

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

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

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

Answer 2

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

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

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