setPointerCapture 在 Chrome 和 Firefox 中的行为不同答案

【问题标题】：setPointerCapture behaves differently in Chrome and FirefoxsetPointerCapture 在 Chrome 和 Firefox 中的行为不同
【发布时间】：2019-08-20 02:47:36
【问题描述】：

我在 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);

要重现问题，请按以下步骤操作：

在正方形上按鼠标左键。
在按住鼠标左键的同时，将鼠标拖到方块外。
松开鼠标左键。

在 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.

【问题讨论】：

标签： javascript google-chrome firefox

【解决方案1】：

pointerId 是PointerEvent 接口的属性。

像 mousedown 这样的鼠标事件不继承自 PointerEvent 并且没有 pointerId 属性。

你想要的是监听pointerdown和pointerup事件：

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

Firefox 将 undefined 转换为 0 而 Chrome 没有，这是一个不幸的差异，但最终没有浏览器真正做到了您的预期，因为您的代码在这里被破坏了。

【讨论】：

【解决方案2】：

我遇到了相同或类似的问题，setPointerCapture() 在 FireFox 上非常适合我的应用程序，但在 Chrome 上却不行。在 Chrome 上它似乎什么也没做，也没有错误消息。

我终于知道为什么了。在 Chrome 上 setPointerCapture() 似乎只捕获“指针事件”，这意味着事件名为“pointermove”和“pointerup”，而不是事件“mousemove”和“mouseup”等。这发生在 Chrome 版本 97.0.4692.99（官方构建）（64-位）

在 FireFox 上，setPointerCapture() 捕获也“鼠标事件”，例如“mousemove”和“mouseup”。这些是我在我的 DOM 元素中设置事件处理程序的那些。因此他们在 FireFox 上运行良好。

解决方案是修改我的代码，而不是为“mousemove”和“mouseup”添加处理程序，我现在为“pointermove”添加处理程序strong>' 和 'pointerup'。进行此更改后，它在 FireFox 和 Chrome 上同样适用。

【讨论】：