在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