Проверьте мышь находится внутри DIV

Question

Я хочу использовать, если заявление, чтобы проверить, если указатель мыши находится внутри определенного DIV, что-то вроде этого:

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

Это приведет к функции, чтобы начать, когда мышь внутри #element и останавливается, когда мышь находится вне #element.

Answer 1

вы можете зарегистрировать JQuery обработчиков:

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

нет JQuery альтернативы:

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

и somewhereelse:

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

Answer 2

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

Вы можете сделать что-то вроде этого

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

Ну, это своего рода, что события для. Просто присоедините прослушиватель событий к div, который вы хотите контролировать.

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

Если вы хотите сделать это с помощью математики, вы все равно должны иметь событие на родительский элемент или что-то, чтобы иметь возможность получить координаты мыши, которые затем будут храниться в объекте события, который передается на обратный вызов.

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

Но лучше использовать вышеуказанный метод.