• 我们中的有些人,注定要在日常生活的点滴中去寻找生命的意义。---- 《生活大爆炸》|

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

前端 admin 10个月前 (07-31) 252次浏览 未收录 0个评论
通过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(鼠标位置的元素对象))具体情况还是要根据自己需要来选择,我是调试了一下方法三,但是具体也没使用上。 其他方法,继续研究中。


本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:如何判断鼠标是否在DIV的区域内
喜欢 (0)

您必须 登录 才能发表评论!