滑鼠經過子元素觸發mouseout，mouseover事件的解決方案

首頁

web前端

js教程

滑鼠經過子元素觸發mouseout，mouseover事件的解決方案_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:49 PM

我想實現的目標：當滑鼠進入黑色框時，橘色框執行淡入動畫；當黑色框範圍移動的時候（即使經過粉紅色框，動畫仍然不被觸發）；當滑鼠移出的時候，橘色方塊消失。

遇到的問題闡述：當滑鼠移入黑色框的時候，橘色框執行淡入動畫，但是當滑鼠從黑色框經過粉紅色框的時候，橘色框就消失了，然後又執行一遍淡入動畫。當滑鼠從粉紅色框移出到黑色框的時候，橘色框的淡入動畫又被執行。這不是我想要的。

初期代碼：

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
 <div class="a1"></div>
</div>
<script>
$('.parent').on('mouseover',function(e){ 
  $('.a1').show(1000);
 });
 $('.parent').on('mouseout',function(e){
  $('.a1').css('display','none');
 });
</script>
</body>
</html>

登入後複製

首先我們解釋一下原因，為什麼會出現這些問題。

當滑鼠從黑色框移到粉紅色框的時候，此時黑色框的mouseout的被觸發，又由於事件冒泡，黑色框的mouseover事件隨即被觸發，所以實際上，橙色框先消失，然後立即執行淡入動畫。這也就是我們看到的過程。

當滑鼠從粉紅色框移到黑色框的時候，此時黑色框的mouseout又被觸發（因為不論滑鼠穿過被選元素或其子元素，都觸發mouseover 事件），同時mouseover也被觸發，所以又出現了再次執行淡入效果的過程。

方法一：用mouseleave/mouseout取代mouseover/mouseout【最佳方法】

先看mouseout&mouseover與mouseleave&mouseenter用法上的差別

mouseover與mouseenter

不論滑鼠指標穿過被選元素或其子元素，都會觸發 mouseover 事件。
只有在滑鼠指標從元素外穿入被選元素（到元素內）時，才會觸發 mouseenter 事件。

mouseout與mouseleave

不論滑鼠指標離開被選元素還是任何子元素，都會觸發 mouseout 事件。
只有在滑鼠指標從元素內穿出被選元素（到元素外）時，才會觸發 mouseleave 事件。

可以看一個簡單的例子看看二者的差別

所以改進的程式碼可以是

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
 <div class="a1"></div>
</div>
<script>
$('.parent').on('mouseenter',function(e){ 
  $('.a1').show(1000);
 });
 $('.parent').on('mouseleave',function(e){
  $('.a1').css('display','none');
 });
</script>
</body>
</html>

登入後複製

方法二：利用e.stopPropagation()阻止事件進一步傳播

e.stopPropagation()會終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。呼叫該方法後，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。

<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
 <meta charset="utf-8">
 <title>mouseover mouseout</title>
 <style type="text/css" media="screen">
   .parent{
 width:200px;
 height:200px;
 background:black;
}
.child{
 width:100px;
 height:100px;
 background:pink;
}
.a1{
 width:40px;
 height:40px;
 background:orange;
 display:none;
}
 </style>
</head>
<body>
<div class="parent">
 <div class="child"></div>
  <div class="a1"></div>
</div>
 <script>
 $('.parent').on('mouseover',function(e){
   $('.a1').show(1000);
 });
 $('.parent').on('mouseout',function(e){
   $('.a1').css('display','none');
 });
 $('.child').on('mouseover',function(e){
  e.stopPropagation();
  $('.a1').css('display','block');
  //这是保证动画体的末状态不变
 });
 $('.child').on('mouseout',function(e){
  e.stopPropagation();
  //防止从粉色框移出到黑色框时再次触发其他事件
 })
 </script>
</body>
</html>

登入後複製

拓展思考：

1.如果子元素太多怎麼辦，難道每個都要去綁定e.stopPropagation()?

用jquery的一個選擇器.children()，例如$('.parent').children()。獲得匹配元素集合中每個元素的子元素。

以上所述就是本文的全部內容了，希望大家能夠喜歡。

本網站聲明

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

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7416

CakePHP 教程

1359

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答本文將探討兩種在JavaScript中替換字符串字符的方法：在JavaScript代碼內部替換和在網頁HTML內部替換。在JavaScript代碼內部替換字符串最直接的方法是使用replace()方法： str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項，需使用正則表達式並添加全局標誌g： str = str.replace(/fi

構建您自己的Ajax Web應用程序 Mar 09, 2025 am 12:11 AM

因此，在這裡，您準備好了解所有稱為Ajax的東西。但是，到底是什麼？ AJAX一詞是指用於創建動態，交互式Web內容的一系列寬鬆的技術。 Ajax一詞，最初由Jesse J創造

10個JQuery Fun and Games插件 Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件，讓您的網站更具吸引力，提升用戶粘性！雖然Flash仍然是開發休閒網頁遊戲的最佳軟件，但jQuery也能創造出令人驚喜的效果，雖然無法與純動作Flash遊戲媲美，但在某些情況下，您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲遊戲編程的“Hello world”，現在有了jQuery版本。源碼 jQuery瘋狂填詞遊戲這是一個填空遊戲，由於不知道單詞的上下文，可能會產生一些古怪的結果。源碼 jQuery掃雷遊戲

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

jQuery視差教程 - 動畫標題背景 Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。我們將構建一個帶有分層圖像的標題橫幅，從而創造出令人驚嘆的視覺深度。更新的插件可與JQuery 1.6.4及更高版本一起使用。下載

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

Matter.js入門：簡介 Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能，例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力，例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外，它也適用於移動設備，因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎，因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中，我將介紹此庫的基礎知識，包括其安裝和用法，並提供一

使用jQuery和Ajax自動刷新DIV內容 Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。加載圖像是選擇

See all articles

滑鼠經過子元素觸發mouseout，mouseover事件的解決方案_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題