拖动元素时是不是禁用 mousemove 事件?

Posted

技术标签:

【中文标题】拖动元素时是不是禁用 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。我尝试了两种不同的方法:

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));

【问题讨论】:

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

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

【讨论】:

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

您可以使用pointermove 事件来完成这项工作;)

【讨论】:

【参考方案3】:

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

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

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

<div draggable>Test</div>

【讨论】:

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

以上是关于拖动元素时是不是禁用 mousemove 事件?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery Mousemove:更改 5px 时触发

元素拖动

js 实现拖拽元素

Ext框架下的元素拖动

使用Jquery或Javascript触发mousemove事件

将“dragstart”事件附加到“mouseup”以获得可拖动体验