Javascript: alert checking for mouseover and mouseout firing multiple times
<p>Writing a code that does the following:</p>

<ol>
<li>Adds a mouse listener to a web-page on load</li>
<li>Checks what element the mouse is positioned over</li>
<li>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 </li>
</ol>

<p>Below is a sample code that I'm using as a testbed</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;title&gt;A test page&lt;/title&gt;
&lt;body&gt;

    &lt;script type='text/javascript'&gt;
    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) &gt; 10000) {
            alert ('You spent a long time there');
        }
    }
    &lt;/script&gt;

    &lt;a href="www.google.co.in"&gt;This is a hyperlink&lt;/a&gt;
    &lt;p&gt; This is just some bloody text &lt;/p&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

<p>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.</p>
