Rumah > hujung hadapan web > tutorial js > 如何判断鼠标是否在DIV的区域内_javascript技巧

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

WBOY
Lepaskan: 2016-05-16 17:15:50
asal
1830 orang telah melayarinya

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

方法一:

通过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";
 }

复制代码 代码如下:

       onMouseOver="chkIn()" onMouseOut="chkOut()">This is a DIV
 


方法二:
复制代码 代码如下:

function   checkIn(e){
var   x=window.event.clientX;
var   y=window.event.clientY;
var   str= ' ';
for(i=0;i             var   obj=document.body.children[i];
          if(x> obj.offsetLeft
                                  &&x                           &&y> obj.offsetTop
                        &&y                 str+= ' \n ';
          }else{
                str+= ' \n ';
        }
  }
alert(str);
}
document.onclick=checkIn

方法三:

这个方法是最简单的实用的。

复制代码 代码如下:

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

即 if(myDiv.contains(鼠标位置的元素对象))

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

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan