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

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

2 个答案: