拖动元素时是否禁用 mousemove 事件？答案

【问题标题】：Are mousemove events disabled while dragging an element?拖动元素时是否禁用 mousemove 事件？
【发布时间】：2018-02-21 11:51:30
【问题描述】：

我试图通过在拖动元素时观察文档上的 mousemove 事件来移动元素（使用 html5 拖放）。我在父元素的文档上添加了一个 mousemove 侦听器，每当我移动鼠标时就会触发该侦听器，但是一旦我开始拖动另一个子元素，我就会停止看到 mousemove 事件，一旦停止拖动，我就会再次看到这些事件。我在 API (https://developer.mozilla.org/en-US/docs/Web/Events/mousemove) 的任何地方都看不到拖动会禁用这些事件，但我不知道如何从我的代码中阻止它们。这只是 html5 拖放的一部分，它会在拖动时禁用 mousemove 事件吗？

我正在使用 angular2 来检测 mousemove。我尝试了两种不同的方法：

@HostListener('document:mousemove', ['$event'])
    onMouseMove(event) {
        console.log('Global mousemove: ', event);
    }

constructor(
      public element: ElementRef,
      private renderer: Renderer2) {
        element.nativeElement.draggable = true;
      }
this.mouseMoveListener = this.renderer.listen('document', 'mousemove', this.onMouseMove.bind(this));

【问题讨论】：

可能你把元素拖到了监听元素区域之外？
我在整个文档上监听 mousemove，并且在拖动时我没有离开浏览器窗口。
这能回答你的问题吗？ Getting mouse position while dragging (JS + HTML5) - TL;DR，您可以使用 dragover 事件，该事件似乎具有良好的性能，并且在鼠标移动时触发

标签： angular drag-and-drop

【解决方案1】：

来自here：“当指针设备（通常是鼠标）在元素上移动时会触发 mousemove 事件。”当您拖动元素时，鼠标不会在其上移动 - 而是与元素同步移动。我认为您应该为此考虑“ondrag”事件 - see here。

【讨论】：

我没有在被拖动的元素上监听 mousemove，我正在监听整个文档上的全局 mousemove。
ondrag 的性能非常非常糟糕，不能用于我想做的事情。我试过了，但很糟糕。
@AlexEgli 这确实很烦人，我也面临同样的问题。你有没有想过在拖动时替换或恢复mousemove 事件？
@AdamBaranyai 老实说，我不记得我当前的代码是否解决了这个问题，或者是否存在其他潜在问题。我最终做的是在文档上使用 observables。我用 fromEvent(document, 'mousemove')

【解决方案2】：

您可以使用pointermove 事件来完成这项工作；）

【讨论】：

【解决方案3】：

你说得对，mousemove 事件在拖动元素时被禁用。您需要收听drag 事件（或者可能同时收听mousemove 和drag，具体取决于您的需要）。拖动事件甚至可以使用全局处理程序。

document.addEventListener('drag', (e) => console.log(e.clientX, e.clientY))

您可以使用虚拟可拖动元素进行测试：

<div draggable>Test</div>

【讨论】：

不幸的是不在 Firefox 中：e.clientX 和 e.clientY 对于拖动事件始终是 0。所以我找到的唯一解决方案是使用应用于文档的onDragOver 事件，因此可以在拖动时触发它，检索clientX和clientY坐标。