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

我一直在试图了解不同浏览器/设备上如何触发不同的指针事件（触摸、鼠标）。为此，我写了一个测试事件的小网页

几周后，我在上运行了Mozilla的事件侦听器测试页面，该页面产生了一个非常不同的结果（我看到触发的事件没有显示在我最初的测试工具中）

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

例如，用Chrome拿起你的平板电脑/智能手机，试着点击my web上的按钮。在大多数情况下，会触发两个事件—touchstart和touchend（偶尔会触发touchmove）。然后试试Mozilla的工具。还有很多（甚至包括点击）

我的绑定：

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

var events = ['MSPointerDown', 'MSPointerUp', ... , 'MSPointerCancel'];
var b = document.getElementById('button');
for (var i=0; i<events.length; i++) {
   b.addEventListener(events[i], report, false);
}

Mozilla绑定：

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

var events = ['MSPointerDown', 'MSPointerUp', ... , 'MSPointerCancel'];
var b = document.getElementById('button');
for (var i=0; i<events.length; i++) {
   b.addEventListener(events[i], report, false);
}

var事件=['MSPointerDown'，'MSPointerUp'，…，'MSPointerCancel']；
var b=document.getElementById（'button'）；
对于（var i=0；ijQuery也在内部使用
addEventListener
。根据事件的不同，jQuery可能会进行一些映射或内部调整

但是，您的代码与Mozilla代码的主要区别在于，您可以在回调方法中调用
e.preventDefault（）；
，但Mozilla不会阻止事件的默认行为

调用
e.preventDefault（）；
不仅会阻止默认行为，因此还会阻止某些其他事件的发生。例如，如果您阻止
mousedown
或
mousemove
则不会发生
拖动
事件。
在浏览器中注册事件的方式没有太大区别

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

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

是的，我知道。但我的测试工具甚至没有显示我绑定的事件（例如单击）…啊，而且你使用的是触摸设备（用鼠标单击效果很好）。在这种情况下，你的
e.preventDefault（）
（如@t.niese所述）在
touchend
（类似于
mouseup
）确实阻止了点击操作。是的，我正在大约8台设备上测试它，包括智能手机、平板电脑、混合型（带键盘和鼠标的平板电脑）和桌面。设备多样性万岁-无论如何，感谢您的快速响应！谢谢！我删除了
e.preventDefault（）
（并稍微更新了事件列表）现在，我得到了与Mozilla工具相同的结果。不过，我还需要阅读更多关于
e.preventDefault（）
行为的内容。@PavelAntolík不幸的是，我目前还不知道一个描述
preventDefault
如何影响其他事件的参考资料。
[…]但是，它也会阻止某些其他事件的发生。
可能有点误导。它可能会阻止浏览器的行为，并且此行为可能会导致其他事件。触摸设备上的
单击事件是模拟事件，如果您阻止触摸事件，则模拟
clic的默认行为k
被阻止了。但老实说，我不知道这是否被标准覆盖，也不知道
preventDefault
是否应该阻止。