Chrome mousedown和mouseup事件不再有效，其他瀏覽器都沒有問題

截至今天（或昨天，當時沒有注意到），mousedown和mouseup事件不再有效。我使用的是Chrome版本55.0.2883.95（64位）。 Safari和FireFox工作正常（我在一臺Mac電腦上）。Chrome mousedown和mouseup事件不再有效，其他瀏覽器都沒有問題

下面是代碼：

document.getElementById("floorplan-backdrop-rect").addEventListener('mousedown', function(ev) { 
    o.clickDown(ev); 
}, false); 

document.getElementById("floorplan-backdrop-rect").addEventListener('mouseup', function(ev) { 
    o.clickUp(ev); 
}, false);

有沒有關於我們錯過了鼠標事件的任何API的變化？ Chrome在註冊事件時也不會發出任何警告。接地和潤色事件似乎辜負了（在iPad上仿真模式的開發人員工具）

編輯：改變標籤，或調整窗口時剛過，該事件似乎來過一小會兒。然後，他們又停下..

問候

來源

2016-12-16 Wouter Coebergh

EDIT（見下面的舊答案）：

鉻拋棄鼠標事件贊成指針事件的55及以上版本。

爲什麼（W3C）：

今天，大多數[HTML5]內容使用具有和/或設計用於鼠標輸入。那些以自定義方式處理輸入的代碼通常編碼爲 [DOM-LEVEL-3-EVENTS]鼠標事件。然而，較新的計算設備然而包含其他形式的輸入，包括觸摸屏，輸入筆等。已經提出事件類型來單獨處理這些輸入形式中的每一個。但是，當添加對新輸入類型的支持時，該方法通常會導致不必要的邏輯和事件處理開銷重複。考慮到只有一個設備類型的內容寫入內容時，這通常會產生兼容性問題。此外，爲了與現有的基於鼠標的內容兼容，大多數用戶代理爲所有輸入類型激發鼠標事件。這使得鼠標事件代表實際鼠標設備或由另一種輸入類型產生的兼容性模糊不清，這使得難以同時對兩種設備類型進行編碼。

可用代碼：

要爲「同」事件中添加不同的事件偵聽器，使用下面的代碼：

// Put these in seperate function instead of anonymous ones 
// since you will need them later to deregister the event 
function onPointerDown(event){ /** Do stuff here **/ } 
function onPointerHover(event){ /** Do stuff here **/ } 
function onPointerMove(event){ /** Do stuff here **/ } 
function onPointerUp(event){ /** Do stuff here **/ } 


// Add event listeners 
domElement.addEventListener("mousedown", onPointerDown); 
domElement.addEventListener("pointerdown", onPointerDown); 
domElement.addEventListener("touchstart", onPointerDown); 

domElement.addEventListener("mousemove", onPointerHover); 
domElement.addEventListener("pointermove", onPointerHover); 
domElement.addEventListener("touchmove", onPointerHover); 

domElement.addEventListener("mousemove", onPointerMove); 
domElement.addEventListener("pointermove", onPointerMove); 
domElement.addEventListener("touchmove", onPointerMove); 

domElement.addEventListener("mouseup", onPointerUp); 
domElement.addEventListener("pointerup", onPointerUp); 
domElement.addEventListener("touchend", onPointerUp); 


// Remove event listeners 
domElement.removeEventListener("mousedown", onPointerDown); 
domElement.removeEventListener("pointerdown", onPointerDown); 
domElement.removeEventListener("touchstart", onPointerDown); 

domElement.removeEventListener("mousemove", onPointerHover); 
domElement.removeEventListener("pointermove", onPointerHover); 
domElement.removeEventListener("touchmove", onPointerHover); 

domElement.removeEventListener("mousemove", onPointerMove); 
domElement.removeEventListener("pointermove", onPointerMove); 
domElement.removeEventListener("touchmove", onPointerMove); 

domElement.removeEventListener("mouseup", onPointerUp); 
domElement.removeEventListener("pointerup", onPointerUp); 
domElement.removeEventListener("touchend", onPointerUp);

參考文獻：

老答案：

貌似鉻拋棄鼠標事件贊成指針事件的55及以上版本。

改變原始代碼以下固定我們的問題鍍鉻：

注：使用不建議這樣做，因爲我們不能註銷聽衆喜歡這個，請參見下面的新範例。

document.getElementById("some-id").addEventListener('pointerdown', function(ev) { 
    o.clickDown(ev); 
}, false); 

document.getElementById("some-id").addEventListener('pointerup', function(ev) { 
    o.clickUp(ev); 
}, false);

請注意，如果您對事件類型額外的檢查，像我們一樣，類型也從'mouseup'改爲'pointerup'和'mousedown'到'pointerdown'

您可以在這裏的更新文章閱讀起來：

https://developers.google.com/web/updates/2016/10/pointer-events

來源

2016-12-20 09:25:56

爲了增加@WouterCoebergh解決方案。您必須記得爲舊事件添加回退。這可以通過以下來完成，取自同一個來源。

var mousedownEvent = function(ev) { 
    o.clickDown(ev); 
} 

var elm = document.getElementById("floorplan-backdrop-rect"); 

if (window.PointerEvent) { 
    elm.addEventListener('pointerdown', mousedownEvent); 
} else { 
    elm.addEventListener('mousedown', mousedownEvent); 
}

[1]：Google Developers Blog

來源

2017-03-29 23:03:00 MrGrigri

Chrome mousedown和mouseup事件不再有效，其他瀏覽器都沒有問題

回答

相關問題