如何判断鼠标是否在DIV的区域内
更新时间：2013年11月13日 10:08:52 作者：
通过mouseover，mouseout来触发事件，才判断鼠标是否在该区域。 但是这种方法的局限性就是，必须要触发mouseover，或mouseout，mouseleave事件才能知道
今天研究了一下这个问题，也普及了一下知识吧。
方法一：
通过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-color:lightblue; 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++){
var obj=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);
}
document.onclick=checkIn
方法三：
这个方法是最简单的实用的。
复制代码 代码如下:
if(myDiv.contains(window.event.srcElement))
即 if(myDiv.contains(鼠标位置的元素对象))
具体情况还是要根据自己需要来选择，我是调试了一下方法三，但是具体也没使用上。 其他方法，继续研究中。
相关文章
js 效率组装字符串,主要是利用了数组原理。2009-12-12
这篇文章主要为大家详细介绍了Bootstrap按钮下拉菜单组件，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章主要为大家详细介绍了js实现购物车的计算方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
在JavaScript中,有多种方法可以合并数组,本文主要介绍了8种方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了基于JavaScript介绍性能爆表的SolidJS，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-09-09
这篇文章主要介绍了Javascript中的call()方法介绍,本文讲解了Call() 语法、Call() 参数、Javascript中的call()方法、Call()方法的实例等内容,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JavaScript将数组转换为链表的方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了JS实现随机生成10个手机号的方法,涉及javascript数值运算与随机数操作相关使用技巧,需要的朋友可以参考下2018-12-12
这篇文章主要介绍了js中关于require与import的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的，而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。2011-08-08
最新评论