Javascript Mouseout持续开火

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

问题是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);              
}

功能工具提示（数据）
{
var div=createDiv（）；
div.className='工具提示'；
div.innerHTML='这是一个工具提示！'；
addChild（div，document.body）；//附加到给定元素
addEventListener（'mouseout'，function（）{removeToolTip（div）；}，false）；
}
功能移除工具提示（el）
{
console.log（'test'）；
this.removeEventListener（'mouseout'，removeToolTip，false）；
移除iv（el）；//移除得非常好
}
对于（var i=0；i，您的事件处理逻辑非常混乱

首先，要向一系列div中的每个div添加mouseover事件处理程序

然后，每次触发鼠标悬停事件时（可能会多次），您都会调用
ToolTip（）
，它会在
此
上添加鼠标悬停事件，该事件似乎是
窗口
对象，因为
ToolTip（）
只是一个普通的函数调用，因此
此
将是全局对象或
未定义的
（在严格模式下）

然后，在
removeToolTip（）
中，您试图调用
removeEventListener（'mouseout'，…）
，但这不起作用，因为您向它传递的函数与使用的
addEventListener（）
不同。
removeEventListener（）
要求您传入与传递给
addEventListener（）
的函数完全相同的函数，否则它将不起任何作用。因此，由于您传递的是不同的函数，因此不会删除任何内容，并且会在window对象上生成mouseout事件和所有事件

在结构上，您需要修复：

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


将实际命名函数（不是匿名函数）传递到
addEventListener（）
，以便以后可以将其与
removeeventlister（）一起使用


调用
removeEventListener（）
时，必须传递与
addEventListener（）使用的命名函数引用完全相同的函数引用


确保您也在尝试对正确的对象调用
removeEventListener（）


有关如何在函数调用中设置此

的详细信息，请参阅中的五个编号点。

el。removeEventListener

el是工具提示，工具提示不需要鼠标交互。您不是在尝试从工具提示本身删除事件处理程序吗？此与

el

。您的逻辑似乎很混乱。不，当鼠标在我想查看的对象上出现时，我会删除工具提示：P工具提示出现在远离鼠标悬停在相关项目上的位置，没有鼠标与其交互。工具提示“悬停”当我鼠标移出时，鼠标会移到上方并移除。

这是我想要查看工具提示的项目。我循环div并添加鼠标悬停，因为每个div都会显示不同信息的工具提示，这就是我传递
数据[i]的原因
用于事件侦听器。我不确定我是否理解您的第二点，但我如何传递引用，我认为
此
做到了这一点？@Dave-
此
在您调用函数时不会保留-它会根据函数的调用方式进行更改。我建议您只为
工具提示（）创建一个参数
函数并将要操作的对象传递给它，就像使用
removeToolTip（）
一样。然后，停止在这两个函数上使用
此
。是的，但在脚本
中，此
始终是同一个div（我在for循环中创建的那些div）所以我只是用
这个基于控制台日志的
来传递它，它是正确的元素。它只是因为某种原因一直在移动，它让我的大脑困惑xD@Dave-像调用
ToolTip（）
这样调用函数不会传递
this
的值。执行
console.log（this）
在
工具提示（）
的内部。你会发现它是
窗口
对象（如果你没有在严格模式下运行）。啊，是的，我现在看到它突然变成了
窗口
，而不是令人痛苦的元素，所以我也必须在函数中传递元素。