jQuery事件中mouseout和mouseover有子元素的情況-js教程-PHP中文網

首頁

web前端

js教程

jQuery事件中mouseout和mouseover有子元素的情況

黄舟

Jun 28, 2017 pm 02:15 PM

jquerymouseoutmouseover

大家都熟悉mouseout 和 mouseover事件，就是滑鼠移出和滑鼠掠過事件，但是還是有部分人不知道在有子元素的情況下，同時還會滑鼠的移出和掠過子元素的時候都會在中再一次觸發。可以看個例子：

<html><head>  
  
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />  
  
<title>mouseout子元素的触发</title>  
  
<script type="text/javascript" src="jquery.min.js"></script>  

<style>
  #list{width:100px;padding:10px;border:1px solid #ccc;background:#FFF;}

  #list ul{margin:0;padding:0;background:#333;}

  #list ul li{list-style:none;margin-bottom:5px;}

  #list ul li a:hover{background:#666;color:#FFF;}

  </style>

</head>  
  
<body>  
  
<a href="#" id="showList">鼠标请过来</a>  
  
<div id="list" style="display:none;">  
  
    <ul>  
  
        <li><a href="#">选项一</a></li>  
  
        <li><a href="#">选项二</a></li>  
  
        <li><a href="#">选项三</a></li>  
  
        <li><a href="#">选项四</a></li>  
  
        <li><a href="#">选项五</a></li>  
  
    </ul>  
  
</div>  
  
</body>  
  
<script type="text/javascript">  
  
    $("#showList").bind("mouseover",function(){  
  
        $("#list").toggle(&#39;fast&#39;);  
  
    }); 
  
      
  
    $("#list").bind("mouseout",function(){  
  
        $(this).slideUp(&#39;fast&#39;);  
  
    });
  
</script>  
  
</html>

這個例子原意是想開啟一個列錶框然後選擇一個選項。滑鼠移開列錶框的時候關閉，但是事實情況是滑鼠只要移上列錶框就關閉。原因就是，列表綁定了一個mouseout事件，因為該列表有很多子元素，所以同意會觸發ul，li，的滑鼠掠過事件，也就是說，當滑鼠移出ul，li的時候同樣會觸發mouseout事件。

解決的方法有多種，本文就是用jquery對應的兩個事件，mouseenter 和 mouseleave，

只要把mouseout事件名改成mouseleave，就大功告成了。嘿嘿，簡單！ jquery都想到了。 ^_^,

Mouseleave ：與 mouseout 事件不同，只有在滑鼠指標離開被選元素時，才會觸發 mouseleave 事件。如果滑鼠指標離開任何子元素，同樣會觸發 mouseout 事件。範例

MouseEnter ：與 mouseover 事件不同，只有在滑鼠指標穿過被選取元素時，才會觸發 mouseenter 事件。如果滑鼠指標穿過任何子元素，同樣會觸發 mouseover 事件。

以上是jQuery事件中mouseout和mouseover有子元素的情況的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles