Question

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

在MDN setCapture上，我没有看到有关setCapture()未实施的任何提及在Chrome中，但尝试运行the example会产生Uncaugt TypeError，因为Chrome中的e.target.setCapture基本上是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）鼠标事件并有效地禁用寄生悬停和指针光标按下鼠标按钮时更改。

从附加到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

请在此处查看issue，并提及不支持setCapture这一事实。有一个针对线程底部的建议解决方法，这可能对您有用。

Answer 3

要解决@Pierre Arnaud答案中的光标问题，请将光标设置在response()->json()标签上：

html

并在以下时间将其还原：

// on mouse down:
document.documentElement.style.cursor = "...";

替换Chrome中的element.setCapture？

3 个答案: