Javascript:对mouseover和mouseout多次触发进行警报检查

Javascript: alert checking for mouseover and mouseout firing multiple times

本文关键字：检查 mouseover mouseout Javascript      更新时间：2023-09-26

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

  1. 加载时将鼠标侦听器添加到网页
  2. 检查鼠标位于哪个元素上
  3. 如果鼠标位于锚点标记上，则在离开前停留一段时间后执行某个功能。现在我只是任意使用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>

在测试时，我发现当警报被触发时，它会被多次触发；两次、三次或甚至更多。我想知道为什么会发生这种情况，以及我能做些什么来避免对同一元素多次发出警报。

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

您需要解除前一个函数的绑定，或者正常分配它，并让focusTime的作用域同时适用于这两个函数。

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

<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>
相关文章：