Javascript mouseover和mouseout事件的奇怪行为

我需要在将鼠标悬停在某个元素（触发器）上时显示

HTMLElement

，在离开同一元素时隐藏它

工作示例 此处显示/隐藏的元素不是悬停在触发器元素上

var div=document.createElement（“div”）；
div.className=“d”；
文件.正文.附件（div）；
var hov=document.createElement（“div”）；
hov.className=“h”；
var hover=false；
var overEvent=“mouseenter”；
var overOut=“mouseleave”；
div.addEventListener（过度通风，功能（e）{
如果（悬停）返回；
文件.正文.附件（hov）；
悬停=真；
控制台。登录（“结束”）；
});
div.addEventListener（结束，功能（e）{
如果（！hover）返回；
文件.正文.删除文件（hov）；
悬停=错误；
控制台。登录（“退出”）；
});
.d{
宽度：100px；
高度：100px；
背景色：#ff9900；
z指数：0；
}
h{
宽度：100px；
高度：100px；
顶部：150px；
底部：150px；
背景色：#000000；
不透明度：0.5；
z指数：1；
}
div{
位置：绝对位置；
}
之所以发生这种情况，是因为上面的元素用处理程序覆盖了元素。因此，当上一个元素出现时，下一个鼠标动作调用处理程序“mouseleave”。
这是因为上一个元素用处理程序覆盖了元素。因此，当上一个元素出现时，下一个鼠标运动调用“mouseleave”的处理程序。
正如Salasar已经说过的，这个问题发生是因为第二个div（鼠标悬停在第一个div上时显示的div）正好显示鼠标所在的位置，这会在第一个div上触发鼠标移出事件。要解决此问题，您可以使用“指针事件：无”配置第二个div，即div.h

我已经更新了你的例子来说明这一点


var div=document.createElement（“div”）；
div.className=“d”；
文件.正文.附件（div）；
var hov=document.createElement（“div”）；
hov.className=“h”；
var hover=false；
var overEvent=“mouseenter”；
var overOut=“mouseleave”；
div.addEventListener（过度通风，功能（e）{
如果（悬停）返回；
文件.正文.附件（hov）；
悬停=真；
控制台。登录（“结束”）；
});
div.addEventListener（结束，功能（e）{
如果（！hover）返回；
文件.正文.删除文件（hov）；
悬停=错误；
控制台。登录（“退出”）；
});
.d{
宽度：100px；
高度：100px；
背景色：#ff9900；
z指数：0；
}
h{
宽度：100%；
身高：100%；
背景色：#000000；
不透明度：0.5；
z指数：1；
指针事件：无；
}
div{
位置：绝对位置；
}
正如Salasar已经指出的，发生此问题是因为第二个div（鼠标悬停在第一个div上时显示的div）正好显示鼠标所在的位置，这会触发第一个div上的鼠标移出事件。要解决此问题，您可以使用“指针事件：无”配置第二个div，即div.h

我已经更新了你的例子来说明这一点


var div=document.createElement（“div”）；
div.className=“d”；
文件.正文.附件（div）；
var hov=document.createElement（“div”）；
hov.className=“h”；
var hover=false；
var overEvent=“mouseenter”；
var overOut=“mouseleave”；
div.addEventListener（过度通风，功能（e）{
如果（悬停）返回；
文件.正文.附件（hov）；
悬停=真；
控制台。登录（“结束”）；
});
div.addEventListener（结束，功能（e）{
如果（！hover）返回；
文件.正文.删除文件（hov）；
悬停=错误；
控制台。登录（“退出”）；
});
.d{
宽度：100px；
高度：100px；
背景色：#ff9900；
z指数：0；
}
h{
宽度：100%；
身高：100%；
背景色：#000000；
不透明度：0.5；
z指数：1；
指针事件：无；
}
div{
位置：绝对位置；
}
除了前面的答案之外：您还可以将“remove div”事件侦听器添加到“hov”元素，而不是“div”元素。那会马上解决你的问题。以下是整个代码以及一些小提示/改进：

var div = document.createElement("div");
div.className = "d";
document.body.appendChild(div);

var hov = document.createElement("div");
hov.className = "h";

var hover = false;

var overEvent = "mouseenter";
var overOut = "mouseleave";

div.addEventListener(overEvent, function(e) {
    // if (hover) return; <-- you don't need that

    document.body.appendChild(hov);
    hover = !hover; // <-- that's easier to maintain incase you're changing the initial value

    console.log("OVER");
});
hov.addEventListener(overOut, function(e) {
    // if (!hover) return; <-- you don't need that

    document.body.removeChild(hov);
    hover = !hover;

    console.log("OUT");
});

除了前面的答案之外：您还可以将“removediv”事件侦听器添加到“hov”元素，而不是“div”元素。那会马上解决你的问题。以下是整个代码以及一些小提示/改进：

var div = document.createElement("div");
div.className = "d";
document.body.appendChild(div);

var hov = document.createElement("div");
hov.className = "h";

var hover = false;

var overEvent = "mouseenter";
var overOut = "mouseleave";

div.addEventListener(overEvent, function(e) {
    // if (hover) return; <-- you don't need that

    document.body.appendChild(hov);
    hover = !hover; // <-- that's easier to maintain incase you're changing the initial value

    console.log("OVER");
});
hov.addEventListener(overOut, function(e) {
    // if (!hover) return; <-- you don't need that

    document.body.removeChild(hov);
    hover = !hover;

    console.log("OUT");
});

假设
hov
按照DOM顺序跟随
div
，您可以使用CSS控制其可见性


var div=document.createElement（“div”）；
div.className=“d”；
文件.正文.附件（div）；
var hov=document.createElement（“div”）；
hov.className=“h”；
文件.正文.附件（hov）
.d{
宽度：100px；
高度：100px；
背景色：#ff9900；
z指数：1；
}
h{
宽度：100%；
身高：100%；
背景色：#000000；
不透明度：0.5；
显示：无；
z指数：0；
}
div{
位置：绝对位置；
}
.d:悬停+0.h{
显示：块；
}
假设
hov
按DOM顺序跟随
div
，您可以使用CSS控制其可见性


var div=document.createElement（“div”）；
div.className=“d”；
文件.正文.附件（div）；
var hov=document.createElement（“div”）；
hov.className=“h”；
文件.正文.附件（hov）
.d{
宽度：100px；
高度：100px；
背景色：#ff9900；
z指数：1；
}
h{
宽度：100%；
身高：100%；
背景色：#000000；
不透明度：0.5；
显示：无；
z指数：0；
}
div{
位置：绝对位置；
}
.d:悬停+0.h{
显示：块；
}
因为
mouseover
触发的元素位于覆盖框后面，所以需要使用
单击
事件打开覆盖框，或者不要让覆盖框越过
mouseover
触发的元素。因为
mouseover
触发的元素位于覆盖框后面，您需要使用
单击
事件打开覆盖层，或者不要让覆盖层越过
鼠标
触发的元素。