DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> js下關於onmouseout、事件冒泡的問題經驗小結
js下關於onmouseout、事件冒泡的問題經驗小結
編輯:關於JavaScript     
問題是這樣的:一個div元素要觸發onmouseout事件,同時這個div內部還有子元素,於是當鼠標移動到該div的子元素上時,onmouseout事件也被觸發了。在要做浮動層效果的時候會經常遇到這個問題。
解決方法一:
使用jQuery,這個大家都會的:
復制代碼 代碼如下:
<div id="div1">觸發顯示浮動層</div>
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
$("#div1").mouseover(function(){
$("#div2").show();
$("#div2").bind("mouseleave",function(){
$(this).hide();
});//此句需要寫在觸發浮動層的函數內
};);
</script>

解決辦法二:
利用onmousemove事件優先的辦法,來防止在子元素中觸發onmouseout:
復制代碼 代碼如下:
<div id="div1" onmouseover="document.getElementById('div2').style.display='block';">觸發顯示浮動層</div>
<div id="div2" onmousemove='this.style.display="";' onmouseout='this.style.display="none";'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved