capture event when the mouse pointer outside of the browser viewport

Question

i am writing a simple infinite counter in javascript when the page loads it starts counting

i would like to stop the counter when the mouse pointer is outside of the viewport

please help?

        var i=0;


            setInterval(function (){
               i++;

               document.getElementById("counterLoop").innerHTML=i;

            },1000);

    var viewportWidth  = document.documentElement.clientWidth;
     var viewportHeight = document.documentElement.clientHeight;


     function getCursorXY(e) {   
CurX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
CurY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);

}

how can i capture mouse move event ouside of the viewport width and heigth

maybe this will help http://stackoverflow.com/questions/10325132/why-is-document-blur-and-document-focus-not-working-with-safari-or-chr — maxlego, Apr 16 '13 at 05:52
@maxlego i tried the above link but i switching to other window it is not losting the focus — pavan, Apr 16 '13 at 06:22

score 5 · Answer 1 · answered Apr 16 '13 at 06:12

5

jQuery(document).mouseleave(function(){console.log('out')})

this will trigger when ever the mouse is not in your page as you want. just change the function to do what every you want .

and also you may use :

jQuery(document).mouseenter(function(){console.log('in')});

to trigger when the mouse enters the page to start your counter again.

answered Apr 16 '13 at 06:12

Hilmi

3,331
6
25
54

This technique is not stable in Chrome 15 to 56 (my current version). But it works very will in Firefox. See: http://stackoverflow.com/questions/7448468/why-cant-i-reliably-capture-a-mouseout-event – Tremours Mar 07 '17 at 01:01

capture event when the mouse pointer outside of the browser viewport

1 Answers1

Linked