Question

编写执行以下操作的代码：

在加载的网页上添加鼠标侦听器
检查鼠标位于
如果鼠标位于锚标记之上，则在离开之前，如果它停留在那里一段时间，则执行某项功能。现在我只是随意使用10000毫秒

以下是我用作测试平台的示例代码

<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>

当测试我发现的是，当警报被触发时，它被多次触发;两次，三次甚至更多。我想知道为什么会发生这种情况以及我可以采取哪些措施来避免为同一元素多次触发警报。

Answer 1

您要向元素添加多个mouseout个事件。

您将需要取消绑定前一个，或正常分配，并将focusTime限定为两个函数。

Answer 2

重复事件绑定...请尝试以下代码。

<html>
<head></head>
<title>A test page</title>
<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", tellTime, false);
        }
        function tellTime(){
            elm.removeEventListener("mouseout", tellTime, false);
            var blurTime = new Date().getTime();
            if ((blurTime - focusTime) > 2000) {
                alert ('You spent a long time there');
            }
        }
}


</script>
<body>
    <a href="www.google.co.in">This is a hyperlink</a>
    <p> This is just some bloody text </p>
</body>
</html>

Javascript：警告检查鼠标悬停和mouseout多次触发

2 个答案: