Home/ Questions/Q 6009165
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T01:55:54+00:00

Writing a code that does the following: Adds a mouse listener to a web-page

  • 0

Writing a code that does the following:

  1. Adds a mouse listener to a web-page on load
  2. Checks what element the mouse is positioned over
  3. If the mouse is positioned over an anchor tag then execute a certain functionality if it stays there for a certain period of time before leaving. For now am just arbitrarily using 10000 ms

Below is a sample code that I’m using as a testbed

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

When testing what I have found is that when the alert is fired it gets fired multiple times; twice, thrice or even more. I wanted to know why this could be happening and what I can do to avoid firing the alert multiple times for the same element.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Repeated event bindings… Try the following code out.

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