Javascript如何检查我的鼠标是否超出元素及其内部的所有内容

假设我有以下代码：

<div id="check-div">
    <span>
        <!-- Can be some inside elements here too -->
    </span>

    <!-- Can be more elements here as well ... -->
</div>

如何检查我是否在div

check div

及其内部的所有内容之外

因此，例如，如果我的鼠标将位于

内部或任何其他内部，则代码将不会处于活动状态？

您可以尝试使用事件：

当定点设备（通常是鼠标）的光标移出某个元素时，

mouseleave

事件将触发该元素

演示：

var el=document.querySelector（'#check div'）；
el.addEventListener（“mouseleave”，函数（事件）{
//突出显示鼠标移动目标
event.target.style.color=“红色”；
//短暂延迟后重置颜色
setTimeout（函数（）{
event.target.style.color=“”；
}, 1000);
}，假）

这里也可以有一些内部元素


这里也可以有更多的元素。。。
您可以在此处使用event，因为只有当指针退出元素及其所有子元素时才会触发
mouseleave
。因此，您可以确保它仅在div
外部选中div
及其内部的所有内容时才会触发


函数鼠标记录（事件）{
设d=新日期（）；
console.log（`${event.type}[target:${event.target.id}]\n`）
}
#父级{
背景：#99C0C3；
宽度：160px；
高度：120px；
位置：相对位置；
}
#孩子{
背景:#FFDE99；
宽度：50%；
身高：50%；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
parent
小孩
使用此代码


$（“#check div”）.mouseover（函数（）{
$（“#check div”）.css（“背景色”、“黄色”）；
});
$（“#check div”）.mouseout（函数（）{
$（“#check div”）.css（“背景色”、“红色”）；
});

这里也可以有一些内部元素


这里也可以有更多的元素。。。
您可以在窗口上使用mouseout listener，然后检查目标是您要瞄准的div还是它的一个子div。


下面的代码解释了这个场景

var check_div = document.querySelector('#check-div');
window.addEventListener('mouseout', event => {
    if (event.target == check_div || 
         Array.from(check_div.children).includes(event.target)) {
        console.log(true, 'mouse out');
    } else {
        console.log(false, 'mouse in');
    }
});

或者，您可以使用窗口上的鼠标向下侦听器来处理单击行为。


下面的代码显示了如何做到这一点

var check_div = document.querySelector('#check-div');
window.addEventListener('mousedown', event => {
    if (event.target == check_div || 
      Array.from(check_div.children).includes(event.target)) {
        console.log(false, 'div clicked');
    } else {
        console.log(true, 'outside div clicked');
    }
});

我差点忘了这一点，你也可以用mousemove listener处理悬停状态。


下面的代码显示了如何使用

var check_div = document.querySelector('#check-div');
window.addEventListener('mousemove', event => {
    if (event.target == check_div || 
      Array.from(check_div.children).includes(event.target)) {
        console.log(false, 'mouse on div');
    } else {
        console.log(true, 'mouse outside div');
    }
}); 

快乐编码