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

前端技术 2023/09/05 JavaScript

今天研究了一下这个问题，也普及了一下知识吧。

方法一：

通过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(鼠标位置的元素对象))

具体情况还是要根据自己需要来选择，我是调试了一下方法三，但是具体也没使用上。 其他方法，继续研究中。

本文地址：https://www.stayed.cn/item/13988

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案