2. 程式人生 > >如何防止滑鼠移出移入子元素觸發mouseout和mouseover事件

如何防止滑鼠移出移入子元素觸發mouseout和mouseover事件

阿新 • • 發佈：2019-01-04

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

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

初期程式碼：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!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也被觸發，所以又出現了再次執行淡入效果的過程。

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

先看一下mouseout&mouseover與mouseleave&mouseenter用法上的區別

mouseover與mouseenter

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

mouseout與mouseleave

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

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

所以改進的程式碼可以為

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!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()會終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。呼叫該方法後，該節點上處理該事件的處理程式將被呼叫，事件不再被分派到其他節點。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<!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()。獲得匹配元素集合中每個元素的子元素。

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

相關推薦

如何防止滑鼠移出移入子元素觸發mouseout和mouseover事件

我想實現的目標：當滑鼠進入黑色框時，橙色框執行淡入動畫；當黑色框範圍移動的時候（即使經過粉色框，動畫仍然不被觸發）；當滑鼠移出的時候，橙色方塊消失。 遇到的問題闡述：當滑鼠移入黑色框的時候，橙色框執行淡入動畫，但是當滑鼠從黑色框經過粉色框的時候，橙色框就消失了，然後又執行一

簡單的滑鼠移出移入樣式改變

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

css的子元素選擇器和後代元素選擇器

css 的子元素選擇器 自元素表示兒子 孫子不可以  h1 > strong {color:red;}         後代選擇器   兒子和孫子 重孫子 所有的後代都起作用   h1 em {color:red;} 需要注意的是後代選擇器和分組選擇器，分組選擇器用

今日總結vue 子元素觸發父元素事件 transition過度事件 axios安裝

<forgetMessage v-if="control.logoState == 2" @my-event="regression" ></forgetMessage> //父元素 methods 方法裡 regression (msg){ // 此事件用來觸發返回的

jQuery實現標籤子元素的新增和賦值

一、在jsp頁面中定義<select>標籤，如下： <div> <span>科室:</span> <select class="dept-name-show" style="width: 70%;"&g

jq滑鼠移入移出元素呈現淡入淡出效果總結

如果是通過滑鼠點選事件來觸發動畫效果 可以使用 $("#button").click(function(){ $("#div").stop().fadeToggle("slow"); }); $.stop()可以防止點選過快時，元素會呈現與點選

js實現滑鼠移入移出元素出來縮排的動畫

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de

div鼠標懸停，子元素上移，鼠標移出，子元素下移動畫。

auto pan mouseout 懸停 edt out script function hid HTML： 　　　　　　　　　　　　　　<div class="edt_title" > <div

楊老師課堂之JavaScript懸浮事件（滑鼠移入移出事件）

 今天給大家分享一個簡單的JavaScript事件案例： 該事件屬於懸浮事件 改程式碼邏輯非常簡單，主要是 當滑鼠移動到按鈕上顯示一個盒子，移開之後盒子隱藏 JavaScript事件中     onmouseover 代表的是滑鼠指標移動到指定的物件

【HTML】—滑鼠移入或移出表格，表格變色

本文積累了幾種滑鼠移入或者移出html的table表格時，表格背景色變化的幾種方法。 一、利用樣式CSS表示式 在樣式裡寫表示式expression，實現滑鼠經過表格行上變色，但在firefox裡無效果。 完整程式碼如下： <html> <hea

根據滑鼠移入移出方向，實現hover效果

首先，我們要判斷滑鼠移入物件的方向：先獲取該物件的左邊距，然後通過判斷滑鼠距離上面、左面、右面、下面的值的最小值，來獲取滑鼠移入物件的方向。 JS程式碼： ;(function($){ $.fn.extend({ dirMove:function(){ var $outer=this

jquery滑鼠移入變色移出恢復

一、需求說明 現需要對一個表格的內容部分做下高亮處理：當滑鼠放到這一行時，背景色發生改變；當滑鼠移出這一行時，恢復這一行的原有背景色。如下圖，原來是除了首行以外，帶序號的內容部分，奇偶行背景色交替變化，當滑鼠放到第1行時，看到下圖的樣式，移出該行後，恢復原樣。 二、程

設定選單欄選單樣式（滑鼠移入移出狀態，背景顏色，字型顏色大小，間距，邊框）

setStyleSheet(“QMenuBar{” “background:rgb(255,255,255);” “color:rgb(0,0,0);” “font-size:14px;” “padding:2px;” “border:1px solid rgb(165,171,184);”

WPF ScrollViewer 滾動條滑鼠移入移出及滑鼠按下拖動時的外觀樣式

在WPF 中自定義ScrollViewer的樣式實現的效果如下圖所示：主要是滑鼠移入顯示滾動條，移出滑鼠滾動條消失，按住拖拽改變滾動條外觀顏色等； 關鍵點幾個點是：1：在ScrollViewer 的自定義模板中 定義好如下幾個事件觸發器： <EventTrigger

JS滑鼠移入，移出事件

該事件的效果就像百度首頁的設定選項，當滑鼠移入，移出時的效果，廢話不多說了，直接上碼。 　　<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>

JS學習筆記 - fgm練習 - 滑鼠移入/移出div樣式改變

  思路： div的預設樣式正常設定。 滑鼠移入時，發生改變的樣式有3個，即 邊框顏色，div背景色，字型顏色。 把這三個css改變設定在一個類名下，再通過js給div動態 新增/去除這個類名，實現div樣式改變。   <style> body{color:#

CSS筆記 - fgm練習 - 滑鼠移入移出div顯示隱藏 CSS樣式部分

問題總結： 1. checkbox和下面隱藏的div對齊，是在清除了預設樣式的前提下，而不需要額外設定float: left; 2. 隱藏的div這裡不需要專門設定寬高、居中，是靠內容和padding撐起來的尺寸。外層div居中，內層跟著居中。 <style> *{margin

JS實現滑鼠移入移出控制圖片的切換效果

在看專業英語的時候，學習JS的Timer Event.正好有一個例子，實現的是，圖片自動切換，當滑鼠點選圖片的時候，停止切換。於是想要動手實踐一下，並且新增上自己的想法。於是就有了下面的圖片和程式碼。 首先，看一下效果圖： 頁面載入的時候，圖片是每隔

初學JS值之用JS實現滑鼠移入移出事件

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初學JS</title> <style> #webo

JavaScript滑鼠移入移出時顏色變化程式碼

判斷滑鼠在網頁的某個區域移動 轉自http://jingyan.baidu.com/article/ac6a9a5e5c040b2b653eac25.html，這裡面還有些其他有用的操作 <html xmlns="http://www.w3.org/1999/xhtm