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

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

javascript

Javascript：对多次触发mouseover和mouseout进行警报检查,javascript,Javascript,编写执行以下操作的代码：加载时将鼠标侦听器添加到网页检查鼠标放置在哪个元素上如果鼠标定位在锚定标记上，则如果鼠标在离开前在锚定标记上停留一定时间，则执行特定功能。目前我只是随意使用10000毫秒下面是我用作测试平台的示例代码 <html> <head></head> <title>A test page</title> <body> <script type='text/javascript'>

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

加载时将鼠标侦听器添加到网页检查鼠标放置在哪个元素上如果鼠标定位在锚定标记上，则如果鼠标在离开前在锚定标记上停留一定时间，则执行特定功能。目前我只是随意使用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>

分配通常意味着不解除前一个事件的绑定吗？