当鼠标悬停在禁用元素上时获取鼠标坐标?

时间:2019-08-22 12:00:43

标签: javascript

使用附加到mousemove对象的全局window事件时,当鼠标移到 disabled 元素上时,鼠标坐标不可用。禁用的元素不会触发任何事件,这会带来问题。

我的应用程序的一部分包括一个自由变换工具,该工具允许元素在视口周围旋转,缩放,调整大小和拖动(拖放)。如果在自由变换对象的同时将鼠标移到禁用的元素上,我的应用程序流程就会中断,因为突然之间,鼠标的坐标对我的对象不可用,直到鼠标离开该元素为止,这给人造成断断续续的感觉,并且用户不好经验。

我尝试使用readonly属性。但是,这不是一个可行的解决方案,因为它仅受两个元素(输入和文本区域)来源https://www.w3.org/TR/html4/interact/forms.html#h-17.12的支持,并且具有不同的行为。

这是一个小提琴,显示了起伏不稳的行为:https://jsfiddle.net/rmw9anLs/2/

我知道该元素本身不会触发任何事件,但是我不会将任何事件附加到禁用的元素上。我希望window.mousemove事件无论如何都会触发,并且不明白为什么页面上的禁用元素会中断全局事件监听器。

除了使用JavaScript实现自定义disabled功能外,还有没有一种方法可以获取鼠标坐标而不必考虑鼠标位于禁用元素的顶部?

1 个答案:

答案 0 :(得分:0)

您不能这样做,因此,disabled属性除了使HTML无效之外没有任何作用。

要停止鼠标事件的工作,请在其上使用event.preventDefault()将事件处理程序附加到该元素,在现有的点击处理程序中检查该元素的data-disabled属性,或使用pointer-events: none在CSS类中,您可以根据需要打开/关闭该类。另请注意,IE <11

中不完全支持指针事件

例如: https://jsfiddle.net/x4nLu0a5/