Question

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

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

1）

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

2）

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

Answer 1

从here：＆＃34;当指针设备（通常是鼠标）在元素上移动时，会触发mousemove事件。＆＃34;当您拖动元素时，鼠标不会移动 - 而是将与元素同步移动。我认为你应该考虑＆＃34; ondrag＆＃34;为此目的的事件 - see here。

Answer 2

是的，在拖动元素时，mousemove个事件被禁用。您需要监听drag事件（或者听mousemove和drag，这取决于您的需求）。即使使用全局处理程序，拖动事件也可以使用。

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

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

<div draggable>Test</div>

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

2 个答案: