当前位置：首页 > 资讯 > 技术文档

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

时间：2020-03-09 06:49 编辑：来源：阅读：
扫一扫，手机访问

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

今天研究了一下这个问题，也普及了一下知识吧。 [b]方法一：[/b] 通过mouseover，mouseout来触发事件，才判断鼠标是否在该区域。但是这种方法的局限性就是，必须要触发mouseover，或mouseout，mouseleave事件才能知道。

[u]复制代码[/u] 代码如下:

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

[u]复制代码[/u] 代码如下:

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

[b]方法二： [/b]

[u]复制代码[/u] 代码如下:

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

[b]方法三：[/b] 这个方法是最简单的实用的。

[u]复制代码[/u] 代码如下:

if(myDiv.contains(window.event.srcElement))

即 if(myDiv.contains(鼠标位置的元素对象)) 具体情况还是要根据自己需要来选择，我是调试了一下方法三，但是具体也没使用上。其他方法，继续研究中。

全部评论(0)

上一篇：js中escape对应的C#解码函数 UrlDecode
下一篇：PHP 小心urldecode引发的SQL注入漏洞

资讯排行榜
更多>>