拖动元素时是不是禁用 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
事件(或者可能同时收听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坐标。以上是关于拖动元素时是不是禁用 mousemove 事件?的主要内容,如果未能解决你的问题,请参考以下文章