hiding a moving div when mouse if offscreen ( want not just to track when the mouse is offscreen)

Question

This is my code in js:

        window.onload = function(){
            var bsDiv = document.getElementById("box");
            var x, y;
// On mousemove use event.clientX and event.clientY to set the location of the div to the location of the cursor:
            window.addEventListener('mousemove', function(event){
                x = event.clientX;
                y = event.clientY;                    
                if ( typeof x !== 'undefined' ){
                    bsDiv.style.left = x + "px";
                    bsDiv.style.top = y + "px";
                }
            }, false);
        }
    </script>

i want to add a function that if the cursor is off screen (or at position null?) it makes the element invisible and then make it re-visible on the cursors re entry

Generally the `mousemove` event doesn't fire when the mouse is off the screen — adeneo, Oct 18 '16 at 22:14
http://stackoverflow.com/questions/8873508/how-can-i-check-if-the-mouse-exited-the-browser-window-using-javascript-jquery — Jeff McCloud, Oct 18 '16 at 22:15
Posted jQuery answer [over there](http://stackoverflow.com/a/40119133/1127972) — doug65536, Oct 18 '16 at 22:31

score 0 · Answer 1 · answered Oct 18 '16 at 22:18

0

document.onmouseout is triggered when the mouse leaves the screen.

so do something like

function invisible(div){
    div.style.visibility = 'hidden';
}
document.addEventListener(onmouseout, invisible(divName), true);

answered Oct 18 '16 at 22:18

rassar

5,412
3
25
41

Did you try it? It does not work. It also bubbles so all `mouseout` will make it think it is outside the window. – doug65536 Oct 18 '16 at 22:25

hiding a moving div when mouse if offscreen ( want not just to track when the mouse is offscreen)

1 Answers1