取消鼠标悬停事件的有效方法.继续往下读，看看为什么

An efficient way to cancel a mouseover event... read on to see why

本文关键字：为什么 继续 方法 悬停 鼠标 事件 有效 取消      更新时间：2023-09-26

我正在创作一个完整的客户端web语言参考网站。我今天遇到的一个问题;我有一个侧面面板，是一个无序的术语列表，它们有onmouseover事件监听器。我决定在执行之前添加延迟并在运行时取消事件，如果鼠标不再位于该元素上，这将是一个好主意。这就是我想到的办法，但我觉得一定有更好的办法。

var currentXCoordinate=0
var currentYCoordinate=0
var elementFromCurrentMousePosition=0
function trackCurrentMousePosition(event) {
    if (document.elementFromPoint(event.clientX, event.clientY).nodeName=="SPAN") {
        elementFromCurrentMousePosition=document.elementFromPoint(event.clientX, event.clientY).parentNode
    }
    else {
        elementFromCurrentMousePosition=document.elementFromPoint(event.clientX, event.clientY)
    }
    return (currentXCoordinate=event.clientX, currentYCoordinate=event.clientY, elementFromCurrentMousePosition)
}
function initPreview(event, obj) {
    arg1=event
    arg2=obj
    setTimeout("setPreviewDataFields(arg1, arg2)", 100)
}
function setPreviewDataFields(event, obj) {
    if ('bubbles' in event) {
        event.stopPropagation()
    }
    else {
        event.cancelBubble=true
    }
    if (elementFromCurrentMousePosition!=obj) {
        return 0;
    }

如果执行没有被前面的if语句取消，代码会继续做我想让它做的所有美妙的事情。问题是这种方法似乎真的是处理器密集型的。

总结一下:在页面加载时，所有的事件侦听器都注册了，光标位置由onmousemove事件跟踪。适用的列表项有一个onmouseover事件，该事件调用initPreview函数，该函数在调用实际的setPreviewDataFields函数之前等待给定的一段时间。如果在运行时游标不再位于list元素上，则函数在return 0处停止。

遗憾的是，这是我能想出的最好的办法了。如果有人能提供更好的解决方案，我将不胜感激。

为什么不直接使用mouseout来告诉鼠标何时离开元素呢?每次鼠标移动时都运行所有的代码是不理想的。

同样，你真的不应该像这样传递一个字符串给setTimeout。而是传递一个函数。作为奖励，您可以摆脱那些邪恶的全局变量arg1和arg2。这些是全局的，我认为你会遇到问题，如果init在超时到期之前再次被调用。

相关文章：