javascript - 在 Chrome 中替换 element.setCapture？

Question

我需要在元素 上发生mousedown 事件后捕获鼠标事件。

关于 MDN setCapture ，我没有看到任何关于 setCapture() 未被实现的提及在 Chrome 中，但尝试运行 the example provided 会产生一个 Uncaugt TypeError 因为 e.target.setCapture 在 Chrome 中基本上是 undefined。

function init() {
  var btn = document.getElementById("myButton");
  btn.addEventListener("mousedown", mouseDown, false);
  btn.addEventListener("mouseup", mouseUp, false);
}

function mouseDown(e) {
  e.target.setCapture();
  e.target.addEventListener("mousemove", mouseMoved, false);
}

function mouseUp(e) {
  e.target.removeEventListener("mousemove", mouseMoved, false);
}

function mouseMoved(e) {
  var output = document.getElementById("output");
  output.innerHTML = "Position: " + e.clientX + ", " + e.clientY;
}

Chrome 中的等效 API 是什么？

Answer 1

我终于想出了一个完整的 ES2015 解决方案(解释为 on my blog )，它捕获鼠标事件并有效禁用寄生悬停和指针光标按下鼠标按钮时会发生变化。

从附加到 mousedown 事件的事件处理程序调用 captureMouseEvents(e):

const EventListenerMode = {capture: true};

function preventGlobalMouseEvents () {
  document.body.style['pointer-events'] = 'none';
}

function restoreGlobalMouseEvents () {
  document.body.style['pointer-events'] = 'auto';
}

function mousemoveListener (e) {
  e.stopPropagation ();
  // do whatever is needed while the user is moving the cursor around
}

function mouseupListener (e) {
  restoreGlobalMouseEvents ();
  document.removeEventListener ('mouseup',   mouseupListener,   EventListenerMode);
  document.removeEventListener ('mousemove', mousemoveListener, EventListenerMode);
  e.stopPropagation ();
}

function captureMouseEvents (e) {
  preventGlobalMouseEvents ();
  document.addEventListener ('mouseup',   mouseupListener,   EventListenerMode);
  document.addEventListener ('mousemove', mousemoveListener, EventListenerMode);
  e.preventDefault ();
  e.stopPropagation ();
}

请注意 pointer-events: none 样式会阻止任何组件接收鼠标事件。