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?

<script type="text/javascript">
                    
        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 outside of the viewport width and height?

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?

<script type="text/javascript">
                    
        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 outside of the viewport width and height?

• javascript
• jquery
• jquery-events

• Did you try anything yet? – Dhaval Marthak Commented Apr 16, 2013 at 4:34
• maybe this will help stackoverflow./questions/10325132/… – maxlego Commented Apr 16, 2013 at 5:52
• @maxlego i tried the above link but i switching to other window it is not losting the focus – pavan Commented Apr 16, 2013 at 6:22

2 Answers 2

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.

Below code is works for me,

const body = document.getElementsByTagName('body')[0];
var intervalExec;
body.addEventListener('mouseenter', function() { //mouseover, mousedown, mousemove
   // Write your setInterval execution
   intervalExec = setInterval(updateCounter, 1000); // updateCounter is your executable function
});
body.addEventListener('mouseleave', function() { //mouseout, mouseup
   clearInterval(intervalExec);
});