要判断鼠标位置是否在某个div中，可以通过以下步骤实现。
第一步：获取鼠标的位置信息
要判断鼠标位置是否在某个div中，首先需要获取鼠标在页面中的位置信息。可以通过以下代码来获取：
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
console.log('鼠标当前位置：x=' + x + ', y=' + y);
});
这段代码中的 clientX 和 clientY 分别代表鼠标在浏览器窗口中的横坐标和纵坐标，用于标识鼠标当前的位置。
第二步：判断鼠标位置是否在指定的div内
获取到鼠标的位置信息之后，就可以根据该信息来判断鼠标是否在指定的div内。可以通过以下代码来实现：
document.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var div = document.getElementById('myDiv');
var divX = div.offsetLeft;
var divY = div.offsetTop;
var divW = div.offsetWidth;
var divH = div.offsetHeight;
if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
console.log('鼠标在指定的div内');
} else {
console.log('鼠标不在指定的div内');
}
});
这段代码中，getElementById() 用于获取指定id的元素，offsetLeft 和 offsetTop 分别代表指定元素的左偏移量和上偏移量，offsetWidth 和 offsetHeight 分别代表指定元素的宽度和高度。利用这些信息，可以判断出鼠标是否在指定的div内。
示例1：提示鼠标是否在指定div内
下面是一个例子，当鼠标进入指定的div内时，页面会弹出提示，并改变div的背景颜色，当鼠标移出指定div后，页面弹出另一个提示并将div的背景颜色变回原来的颜色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断鼠标位置是否在指定div中</title>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: #F0F0F0;
}
</style>
<script>
window.onload = function() {
var div = document.getElementById('myDiv');
div.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var divX = div.offsetLeft;
var divY = div.offsetTop;
var divW = div.offsetWidth;
var divH = div.offsetHeight;
if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
console.log('鼠标在指定的div内');
div.style.backgroundColor = '#00FF00';
} else {
console.log('鼠标不在指定的div内');
div.style.backgroundColor = '#F0F0F0';
}
});
};
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
示例2：跳转到指定页面
下面是另一个例子，当鼠标进入指定的div内时，页面会自动跳转到指定的页面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>判断鼠标位置是否在指定div中</title>
<script>
window.onload = function() {
var div = document.getElementById('myDiv');
div.addEventListener('mousemove', function(e) {
var x = e.clientX;
var y = e.clientY;
var divX = div.offsetLeft;
var divY = div.offsetTop;
var divW = div.offsetWidth;
var divH = div.offsetHeight;
if (x >= divX && x <= (divX + divW) && y >= divY && y <= (divY + divH)) {
console.log('鼠标在指定的div内');
window.location.href = 'http://www.baidu.com';
}
});
};
</script>
</head>
<body>
<div id="myDiv" style="width: 200px; height: 200px; background-color: #F0F0F0;"></div>
</body>
</html>
当鼠标进入指定的div后，页面会自动跳转到百度搜索页面。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js判断鼠标位置是否在某个div中的方法 - Python技术站
微信扫一扫 
支付宝扫一扫 