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

发布于 2018-02-05 14:38:34 字数 1918 浏览 4139 评论 0

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

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的区域内,你可以根据你的爱好使用其中一种方法,第一种方法还要注意冒泡。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。