Controllare se il mouse si trova all'interno div

Question

voglio usare un'istruzione if per verificare se il mouse si trova all'interno di un certo div, qualcosa di simile:

if (mouse is inside #element) { 
// do something 
} else { 
return; 
} 

Ciò comporterà la funzione per avviare quando il mouse è all'interno di #element e si ferma quando il mouse è all'esterno di #element.

Answer 1

è possibile registrare i gestori di jQuery:

var isOnDiv = false; 
$(yourDiv).mouseenter(function(){isOnDiv=true;}); 
$(yourDiv).mouseleave(function(){isOnDiv=false;}); 

senza jQuery alternativa:

document.getElementById("element").addEventListener("mouseenter", function() {isOnDiv=true;}); 
document.getElementById("element").addEventListener("mouseout", function() {isOnDiv=false;}); 

e somewhereelse:

if (isOnDiv===true) { 
// do something 
} else { 
return; 
} 

Answer 2

$("div").mouseover(function(){ 
    //here your stuff so simple.. 
}); 

Si può fare qualcosa di simile

var flag = false; 
$("div").mouseover(function(){ 
    flag = true; 
    testing(); 
}); 
$("div").mouseout(function(){ 
    flag = false; 
    testing(); 
}); 

function testing(){ 
    if(flag){ 
     //mouse hover 
    }else{ 
     //mouse out 
    } 
} 

Answer 3

Beh, questo è un pò di quali eventi sono per. È sufficiente collegare un listener di eventi al div che si desidera monitorare.

var div = document.getElementById('myDiv'); 
div.addEventListener('mouseenter', function(){ 
    // stuff to do when the mouse enters this div 
}, false); 

Se si vuole fare usando la matematica, è ancora bisogno di avere un evento su un elemento padre o qualcosa del genere, per essere in grado di ottenere le coordinate del mouse, che verranno poi memorizzati in un oggetto evento, che viene passato al callback.

var body = document.getElementsByTagName('body'); 
var divRect = document.getElementById('myDiv').getBoundingClientRect(); 
body.addEventListener('mousemove', function(event){ 
    if (event.clientX >= divRect.left && event.clientX <= divRect.right && 
     event.clientY >= divRect.top && event.clientY <= divRect.bottom) { 
     // Mouse is inside element. 
    } 
}, false); 

Ma è meglio utilizzare il metodo sopra.