Kiểm tra xem chuột là bên trong div

Question

Tôi muốn sử dụng một câu lệnh if để kiểm tra xem chuột là bên trong một div nào đó, một cái gì đó như thế này:

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

này sẽ dẫn đến chức năng để bắt đầu khi con chuột là bên trong #element và dừng khi chuột ở bên ngoài #element.

Answer 1

bạn có thể đăng ký xử lý jQuery:

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

không jQuery thay thế:

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

và somewhereelse:

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

Answer 2

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

Bạn có thể làm một cái gì đó như thế này

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

Vâng, đó là kinda của những sự kiện dành cho. Chỉ cần đính kèm trình xử lý sự kiện vào div bạn muốn theo dõi.

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

Nếu bạn muốn làm điều đó bằng toán học, bạn vẫn cần phải có một sự kiện vào một yếu tố phụ huynh hoặc một cái gì đó, để có thể có được các tọa độ chuột, sau đó sẽ được lưu trữ trong một đối tượng sự kiện, mà được chuyển đến cuộc gọi lại.

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

Nhưng tốt nhất nên sử dụng phương pháp trên.