"setPointerCapture 在 Chrome 和 Firefox 中的行為不同"

Question

我在 flexbox 中有一堆方形 div。 當我在正方形內按下鼠標按鈕時，我希望目標正方形的背景發生變化。 我想捕獲鼠標，所以當我將鼠標移到捕獲的正方形外並釋放鼠標按鈕時，背景應該變回原來的顏色。

這有點難以描述，所以這里是代碼。 https://codepen.io/tqphan/pen/qBWaVod

window.addEventListener('mousedown', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  target.classList.add("pressed")
  target.setPointerCapture(e.pointerId);
}, true);
window.addEventListener('mouseup', function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  target.classList.remove("pressed")
  target.releasePointerCapture(e.pointerId);
}, true);

要重現此問題，請按照下列步驟操作：

1. 在正方形上按鼠標左鍵。
2. 在按住鼠標左鍵的同時，將鼠標拖到方塊外。
3. 松開鼠標左鍵。

在 Firefox 中，它按我的預期工作。 在 Chrome 中，背景不會變回原來的顏色。

我嘗試捕獲窗口和文檔的事件。

編輯：似乎指針捕獲和釋放沒有在 Chrome 中執行。

pen.js:6 Uncaught DOMException: Failed to execute 'setPointerCapture' on 'Element': No active pointer with the given id is found.

pen.js:12 Uncaught DOMException: Failed to execute 'releasePointerCapture' on 'Element': No active pointer with the given id is found.

Answer 1

pointerId是PointerEvent接口的屬性。

像mousedown這樣的MouseEvents不會從PointerEvent繼承，也沒有pointerId屬性。

您想要的是監聽pointerdown和pointerup事件：

 onmousedown = e => console.log('mousedown', e.pointerId) // undefined onpointerdown = e => console.log('pointerdown', e.pointerId) // id 

不幸的是，Firefox將undefined為0而Chrome並非如此，但是最終，沒有瀏覽器真正做到了您的期望，因為您的代碼在這里被破壞了。

Answer 2

我遇到了相同或類似的問題，setPointerCapture() 在 FireFox 上非常適合我的應用程序，但在 Chrome 上卻不行。 在 Chrome 上，它似乎什么也沒做，也沒有錯誤消息。

我終於明白為什么了。 在 Chrome 上 setPointerCapture() 似乎只捕獲“指針事件”，這意味着事件名為“pointermove”和“pointerup”，而不是事件“mousemove”和“mouseup”等。這發生在 Chrome 版本 97.0.4692.99（官方構建）（64-少量）

在 FireFox 上，setPointerCapture()還<\/em>捕獲“鼠標事件”，例如“mousemove”和“mouseup”。 這些是我在我的 DOM 元素中設置事件處理程序的那些。 因此他們在 FireFox 上運行良好。

解決方案是修改我的代碼，而不是為“ mousemove<\/strong> ”和“ mouseup<\/strong> ”添加處理程序，我現在為“ pointermove<\/strong> ”和“ pointerup<\/strong> ”添加處理程序。 在此更改之后，它在 FireFox 和 Chrome 上同樣適用。