如何检测鼠标何时离开元素
如何检测鼠标何时离开元素
提问于 2018-04-24 02:16:12
当鼠标移动到一个元素上时，就会触发mousemove。如何检测鼠标何时在元素外移动？换句话说，除了代码片段中的div之外，页面上的任何位置。不是在鼠标离开时，而是每当鼠标在元素之外移动时就会触发。
const div = document.querySelector('div');
div.addEventListener('mousemove', function() {
document.body.classList.add('mouse-moving');
});div {
height: 200px;
width: 300px;
background-color: red;
}
.mouse-moving {
background-color: green;
}<div></div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-24 02:17:14
您可以使用onmouseover和onmouseout
const div = document.querySelector('div');
div.onmouseover = ()=> document.body.classList.add('mouse-moving');
div.onmouseout = ()=> document.body.classList.remove('mouse-moving');div {
height: 200px;
width: 300px;
background-color: red;
}
.mouse-moving {
background-color: green;
}<div></div>
Stack Overflow用户
发布于 2018-04-24 02:22:33
您可以将mousemove事件侦听器添加到document，并检查事件目标是否是您的div：
const div = document.querySelector('div');
document.addEventListener('mousemove', function(e) {
if(e.target !== div) {
div.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
} else {
div.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
}
});div {
height: 200px;
width: 300px;
background-color: red;
}<div></div>
注意:如果div包含其他元素，则测试将无法工作。您必须检查目标的祖先是否是您的div：
document.addEventListener('mousemove', function(e) {
var elm;
for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
;
if(elm === div) {
// inside div
} else {
// outside div
}
});
const div = document.querySelector('div'),
result = document.querySelector("#result");
document.addEventListener('mousemove', function(e) {
var elm;
for(elm = e.target; elm && elm !== div; elm = elm.parentElement)
;
if(elm === div) {
result.textContent = "inside the div (" + e.clientX + ", " + e.clientY + ")";
} else {
result.textContent = "outside the div (" + e.clientX + ", " + e.clientY + ")";
}
});div {
height: 200px;
width: 300px;
background-color: red;
}
div > div {
height: 50px;
width: 50px;
background-color: blue;
margin: 5px;
}<span id="result"></span>
<div>
<div></div>
<div></div>
</div>
此外，如果div的子节点在其边界之外(由于某种绝对位置或其他原因)，上述方法将无法工作，您必须检查鼠标坐标是否位于div的边界矩形内。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49992462
复制相关文章
相似问题
腾讯云开发者
