替换Chrome中的element.setCapture？

Question

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

在MDN setCapture上,我没有看到任何提及setCapture()没有在Chrome中实现,但尝试运行提供的示例产生一个Uncaugt TypeError因为e.target.setCapture基本上undefined在Chrome中.

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解决方案(在我的博客上解释),该解决方案捕获鼠标事件并在按下鼠标按钮时有效地禁用寄生悬停和指针光标更改.

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

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样式可防止任何组件接收鼠标事件.

Answer 2

请参阅此处的问题setCapture，提及不受支持的事实。线程底部有一个建议的解决方法，可能对您有用。