我正在尝试创建一个代码，当您将跨度悬停几秒钟时，会出现一个框，如果您将鼠标放在框上，它会保持静止而不褪色。示例代码是这样的：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>I'm a pathetic programmer please don't flame me</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function() {
var b = 1000;
var c = $('#box');
var d = function(a) {
if (a) {
c.fadeOut(500)
} else {
c.fadeIn(500)
}
};
$('span').mouseenter(function() {
e = setTimeout(function() {
d()
}, b);
$(this).mouseleave(function() {
typeof e != 'undefined' && clearTimeout(e);
f = setTimeout(function() {
d(1)
}, 300)
})
});
c.mouseenter(function() {
clearTimeout(f);
typeof g != 'undefined' && clearTimeout(g)
}).mouseleave(function() {
g = setTimeout(function() {
d(1)
}, 300)
})
});
</script>
<style type="text/css" media="screen">
#box {
display: none;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<span>HOVER ME</span>
<div id="box"></div>
</body>
</html>
编辑：JS提琴进行实时测试：http://jsfiddle.net/2ogcp9tm/
问题是代码在我第一次运行时运行良好，但是如果我再次将跨度悬停并且尝试将鼠标放在蓝色框上，它仍然会消失。
为什么会这样呢？
最佳答案
每次输入span时，都将为该范围绑定mouseleave处理程序。因此，如果您多次输入跨度，则在离开时将多次运行mouseleave处理程序。这些中的每一个都将调用setTimeout()，但是f将仅设置为最后一个。因此，当您稍后执行clearTimeout(f)时，它仅清除其中一个，其他的继续运行。
将一个事件处理程序绑定到另一个事件处理程序中几乎是绝对不对的。通常应在顶层定义事件处理程序。如果希望一个处理程序依赖于其他处理程序是否首先运行，请使用变量来跟踪它。
关于javascript - 为什么我第二次将鼠标悬停在某个元素上时消失了？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25784782/