javascript - Mouseout 持续不断地发射

Question

所以我有一个分配鼠标悬停的函数，这会向触发它的 div 添加一个悬停工具提示 div 和一个 mouseout 事件，以便我可以删除工具提示。

问题是 mouseout 事件会触发，但当我将鼠标移动到 div 之外的任何位置时，它会不断触发，因此鼠标的每个像素移动都会触发数百次。

这是设置:

function ToolTip(data)
{
    var div           =  createDiv();
        div.className = 'ToolTip';
        div.innerHTML = 'This is a tooltip!';

    addChild(div,document.body); // appends to given element
    this.addEventListener('mouseout',function(){removeToolTip(div);},false);
}
function removeToolTip(el)
{
    console.log('test');
    this.removeEventListener('mouseout',removeToolTip,false);
    removeDiv(el);  //removes perfectly fine
}


for(var i=0;i<data.length;i++)
{
 var div = document.getElementById('id'+i);
    (function(i){
        div.addEventListener("mouseover",function(){ToolTip(data[i]);},false);
    })(i);              
}

我不明白为什么 mouseout 不断触发，我在控制台日志中得到 test 所以它应该删除事件监听器。我哪里出错了？

Answer 1

您的事件处理逻辑非常困惑。

首先，您要向一系列 div 中的每一个添加鼠标悬停事件处理程序。

然后，每次触发 mouseover 事件时(可能会多次)，您都会调用 ToolTip()，这会在 this 上添加一个 mouseout 事件，该事件看起来是 window 对象，因为 ToolTip() 只是一个普通的函数调用，因此 this 要么是全局对象，要么是 undefined(严格模式)。

然后，在 removeToolTip() 中，您尝试调用 removeEventListener('mouseout', ...)，但这不起作用，因为您向其传递与使用的 addEventListener() 不同的函数。 removeEventListener() 要求您传入与传递给 addEventListener() 完全相同的函数，否则它不会执行任何操作。因此，由于您传递的是不同的函数，因此不会删除任何内容，并且您会累积 mouseout 事件以及所有窗口对象。

从结构上来说，您需要修复:

1. 确保您在正确的对象上安装事件处理程序。您的函数中的 this 并不是您想要的。我建议您停止在这些函数中使用 this 并将您想要操作的对象作为参数传递给这些函数。

2. 将实际的命名函数(不是匿名函数)传递给 addEventListener()，以便稍后可以将其与 removeEventListener() 一起使用。

3. 当您调用 removeEventListener() 时，您必须传递与 addEventListener() 中使用的完全相同的命名函数引用。

4. 确保您也尝试在正确的对象上调用 removeEventListener()。

有关如何在函数调用中设置 this 的更多信息，请参阅 this prior answer 中的五个编号点。 .