javascript - Capture event when the mouse pointer outside of the browser viewport - Stack Overflow

admin管理员组

文章数量:1389859

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

Share Improve this question Follow edited Oct 2, 2022 at 22:40 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Apr 16, 2013 at 4:28 pavanpavan 31411 gold badge88 silver badges2121 bronze badges 3

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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);
});

本文标签： javascriptCapture event when the mouse pointer outside of the browser viewportStack Overflow