非常之頭痛的onmouseout

   ul標籤裏面的onmouseout事件 整整鬱悶了我一天。一個元素有onmouseout事件,同時這個元素內部還有子元素,問題是:當鼠標在該元素的子元素上移動,但是並沒移出改元素時onmouseout事件也被觸發了。不管是div 還是ul都存在這個問題。我現在的標籤結構是<ul οnmοuseοver="stopTimer()" οnmοuseοut="openTimer()"><li>第一個內容</li><li>第二個內容</li>><li>第三個內容</li></ul>  其中openTimer()和stopTimer()方法在這就不細寫了,其主要的作用就是開啓定時器及清空定時器以實現圖片自動切換效果。但是很鬱悶的是,當我在ul的子標籤不同的li之間切換的時候 onmouseout事件也被觸發了從而導致定時器混亂~  試了很多種方法都不行,也嘗試了在ul標籤外添加div標籤並將onmouseout事件放到div中觸發 還是一樣“當在div內部所包含的子元素中切換但是並沒有移出div” onmouseout事件也被觸發!

     後來求教朋友 他的意思說“先判斷下類型 然後再響應..  通過Event 去拿到觸發事件的對象.” 這樣的做法onmouseout事件放在ul中任然有問題,然後我在ul外多加了一個div 把onmouseover和onmouseout事件放div中 不出其然還是不行,但是我貌似看到我要的效果正在一步步逼近..於是我努力的嘗試,結果問題終於讓我給解決了。。。 問題是 在div中我把div內所包含內容的寬、高屬性都加上~ 問題基本解決了。以下是我的代碼,將其貼出來 以免以後再次遇到

<div οnmοuseοver="stopTimer()" οnmοuseοut="fun1(event)" style="width:143;height:297px;">

<ul>

    <li>第一個內容</li><li>第二個內容</li>><li>第三個內容</li>

</ul>

</div>

 

<script>

function fun1(e){
        if (!e)
         e = window.event;
 
 var tg = (window.event) ? e.srcElement : e.target;
 if (tg.nodeName == 'DIV'){

           //你要執行的操作(調用的函數)
           //autoChangeImage();
         }
    }

</script>

 

他的思路是: 判斷目標對象是哪個.

如果是UL 那麼就做操作

如果不是 return。

 

 

http://www.quirksmode.org/js/events_mouse.html#mouseover 這個API也有講到onmouseout的這個問題

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章