JavaScript 判断鼠标是否在 DIV 的区域内

Question

今天有个网友使用 FullPage 这个插件有一个问题，就是左右两个内容区域都使用了 FullPage 插件，但是想让他们各自运行鼠标的滑轮事件，然而 FullPage 这个插件是监听了鼠标的滑轮事件，也就是阻止了原来的鼠标滑轮事件，这个才会有滑动效果，这显然不能符合我们的要求，解决的方法就是使用 JavaScript 判断鼠标是否在 DIV 的区域内。

Mouseover 和 Mouseout

通过 Mouseover、Mouseout 来触发事件，才判断鼠标是否在该区域。 但是这种方法的局限性就是，必须要触发 Mouseover 或 Mouseout 和 Mouseleave 事件才能知道。

function chkIn(){
    div_1.innerText = "现在你把鼠标移入层了！";
    div_1.style.font = "normal black";
}
function chkOut(){
    div_1.innerText = "现在你把鼠标移出层了！";
    div_1.style.font = "bold red";
}

<div id="div_1" style="background:#666; width:400px; height:300px;" onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV</div>

通过鼠标的坐标

我们可以通过鼠标的坐标，然后和内容区域做对比，就能知道鼠标是否在内容区域内。

function checkIn(e){
    var x=window.event.clientX;
    var y=window.event.clientY;
    var str= ' ';
    for(i=0;i <document.body.children.length;i++){
        varobj=document.body.children[i];
        if(x > obj.offsetLeft && x < (obj.offsetLeft+obj.clientWidth) && y > obj.offsetTop && y < (obj.offsetTop+obj.clientHeight)){
            str += ' <鼠标位于层 '+obj.id+ '范围之内> \n ';
        }else{
            str += ' <鼠标位于层 '+obj.id+ '范围之外> \n ';
        }
    }
    alert(str);
}

Contains 方法

这个方法也是最简单和实用的，不过貌似 Firefox 不支持。

if(myDiv.contains(window.event.srcElement)){
    alert('在里面');
}else{
    alert('不在里面');
}

以上的 3 中方法都可以判断鼠标是否在DIV的区域内，你可以根据你的爱好使用其中一种方法，第一种方法还要注意冒泡。