Question

我在flexbox中有一堆square 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.

Answer 1

pointerId是PointerEvent界面的属性。

mousedown之类的MouseEvent不会从 PointerEvent 继承，并且没有pointerId属性。

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

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

不幸的是，Firefox将undefined转换为0，而Chrome并非如此，但是最终，没有浏览器真正做到了您的期望，因为您的代码在这里被破坏了。

setPointerCapture在Chrome和Firefox中的行为有所不同

1 个答案: