javascript onmouseout應用於由兒童解僱的div

我無法通過谷歌尋找此解決方案，但我會認爲這將是一個相當常見的問題。我有一個div，我應用了一個onmouseout事件處理程序（處理程序用於使用jquerys「slideup」函數向上滾動菜單，因爲我希望菜單在鼠標離開時隱藏）。問題在於該div的子元素也導致處理程序觸發（我接受這是由於冒泡事件模型的性質而設計的）。現在我想知道的是什麼是最好的方式來忽略這些由divs子項觸發的事件，並且只有在鼠標離開事件應用到的div時才滾動菜單。javascript onmouseout應用於由兒童解僱的div

感謝

來源

2009-08-15 Simon Fox

感謝所有快速回復，接受的答案最終成爲最佳解決方案。 – 2009-08-15 05:26:32

您在尋找的是mouseenter和mouseleave。

一個很好的例子可以在此鏈接上找到（他們比較了兩者的mouseenter和鼠標懸停）

http://docs.jquery.com/Events/mouseover

博客條目

http://blogs.oracle.com/greimer/entry/mouse_over_out_versus_mouse

來源

2009-08-15 03:38:08

嗯我知道這些事件 – Cleiton 2009-08-15 03:46:40

注意：這些不是標準的W3C事件。它們只能在IE中原生實現... jQuery通過綁定常規的鼠標懸停/跳出事件來使它們工作，並且只在目標是預期目標時觸發一次。 – James 2009-08-15 08:06:04

-2

不，它不是由設計，你不小心你的應用「的onmouseout」太多的div。你只想把它應用到一個。

來源

2009-08-15 03:33:32

我只將它應用到一個div，如果你考慮冒泡事件模型，我會確定它是一個設計行爲。在@Vineet Reynolds回答這個問題時，請看一下鏈接到quirks模式。 – 2009-08-15 05:33:41

對不起，但你錯了。你已經將它應用到1個以上的div。 – 2009-08-15 06:25:24

閱讀鏈接文章 – 2009-08-15 11:09:35

-1

Simon您可以使用jquery Event.target屬性檢查誰觸發了該事件。

來源

2009-08-15 03:36:58 Cleiton

你可能想嘗試取消事件冒泡或傳播。 Quirksmode.org有一個方便的部分解釋如何關閉模型中的冒泡或傳播。

由於JQuery的呈現W3C standards給開發商，你會不會需要設置cancelbubble屬性。調用stopPropagation（）方法就足夠了。

來源

2009-08-15 03:47:39

使用父DIV的「的mouseenter」和「鼠標離開」，而不是 - 子元素並不會影響「鼠標離開」

document.getElementById('Main_Menu_Container_Div').addEventListener('mouseenter',function(){ 
// do something like your 'slideup' or what ever you want. 
});

「事件冒泡」，因爲它是已知的，是問題 - 「元素2上的事件優先，這叫做事件冒泡「。 http://www.quirksmode.org/js/events_order.html

使用示例：

<style> 
.Child_Div_Button{ 
    float:left; 
    cursor:pointer; 
    height:100px; 
    width:100px; 
    background-color:#CCC; 
    border:#000 thin solid; 
    margin:2px; 
    padding:2px; 
} 


.Child_Div_Button:hover{ 
    background-color:#FFF; 
} 
</style> 
</head> 
<body> 

<div id="Parent_Div_Container" style="height:300px; width:300px; border:#333 thin solid; background-color:#D2FFFF;"> 
Parent Div 
<div id="button_container"> 
     <div class="Child_Div_Button"> 
     Button 1 Child Div 
     </div> 

     <div class="Child_Div_Button"> 
     Button 2 Child Div 
     </div> 
    </div> 

</div> 


<script type="text/javascript"> 

     document.getElementById('button_container').style.display = 'none';// initiate 

     document.getElementById('Parent_Div_Container').addEventListener('mouseenter',function(){ 
      document.getElementById('button_container').style.display = 'block'; 
     }); 
     document.getElementById('Parent_Div_Container').addEventListener('mouseleave',function(){ 
      document.getElementById('button_container').style.display = 'none'; 
     }); 



</script>

似乎在工作最新的Firefox，而不需要jQuery的 - 而Chrome，IE和Safari，似乎都需要爲這個jQuery庫工作。那是說mozila現在完全支持使用mouseenter和mouseleave？！？！如果是的話...... YAY！對於實際上幫助開發人員的瀏覽器：）

來源

2012-09-12 04:28:22 KDawg

javascript onmouseout應用於由兒童解僱的div

回答

相關問題