编写执行以下操作的代码:
- 在加载时向网页添加鼠标监听器
- 检查鼠标所在的元素
- 如果鼠标位于 anchor 标记上，则在离开之前停留一段时间后执行特定功能。现在我只是随意使用 10000 ms
下面是我用作测试平台的示例代码
<html>
<head></head>
<title>A test page</title>
<body>
<script type='text/javascript'>
document.addEventListener("mouseover", checkElement, false);
function checkElement(ev){
var elm = ev.target || ev.srcElement;
if(elm.tagName === 'A'){
var focusTime = new Date().getTime();
elm.addEventListener("mouseout", function() {tellTime(focusTime)}, false);
}
}
function tellTime(focusTime){
var blurTime = new Date().getTime();
if ((blurTime - focusTime) > 10000) {
alert ('You spent a long time there');
}
}
</script>
<a href="www.google.co.in">This is a hyperlink</a>
<p> This is just some bloody text </p>
</body>
</html>
在测试时我发现，当警报被触发时，它会被多次触发；两次、三次甚至更多。我想知道为什么会发生这种情况，以及如何避免对同一元素多次触发警报。
最佳答案
您正在向元素添加多个 mouseout 事件。
您需要取消前一个函数的绑定(bind)，或者正常分配它并让 focusTime 作用于这两个函数。
关于Javascript:多次触发鼠标悬停和鼠标移出的警报检查，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6319975/