DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 如何判斷鼠標是否在DIV的區域內
如何判斷鼠標是否在DIV的區域內
編輯:JavaScript綜合知識     

 通過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(鼠標位置的元素對象))

具體情況還是要根據自己需要來選擇,我是調試了一下方法三,但是具體也沒使用上。 其他方法,繼續研究中。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved