Solution to mouseout and mouseover events triggered when the mouse passes over a child element

Solution to mouseout and mouseover events triggered when the mouse passes over a child element_javascript skills

WBOY

Release： 2016-05-16 15:49:06

Original

1438 people have browsed it

What I want to achieve: When the mouse enters the black box, the orange box performs a fade-in animation; when the black box range moves (even if it passes the pink box, the animation is still not triggered); when the mouse moves out, the orange box disappear.

Explanation of the problem encountered: When the mouse moves into the black box, the orange box performs a fade-in animation, but when the mouse passes from the black box to the pink box, the orange box disappears, and then the fade-in animation is performed again. When the mouse moves out of the pink box to the black box, the fade-in animation of the orange box is executed again. This is not what I want.

Initial code:

<!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>

Copy after login

First we explain the reasons why these problems occur.

When the mouse moves from the black box to the pink box, the mouseout of the black box is triggered, and due to the event bubbling, the mouseover event of the black box is triggered immediately, so in fact, the orange box disappears first, and then Perform the fade-in animation immediately. This is the process we see.

When the mouse moves from the pink box to the black box, the mouseout of the black box is triggered again (because no matter whether the mouse passes through the selected element or its sub-elements, the mouseover event is triggered), and mouseover is also triggered at the same time. So there's the process of performing the fade-in effect again.

Method 1: Use mouseleave/mouseout instead of mouseover/mouseout [Best method]

Let’s first look at the difference in usage between mouseout&mouseover and mouseleave&mouseenter

mouseover and mouseenter

The mouseover event will be triggered whenever the mouse pointer passes through the selected element or its sub-elements.
The mouseenter event will only be triggered when the mouse pointer passes from outside the element into the selected element (into the element).

mouseout and mouseleave

The mouseout event will be triggered whether the mouse pointer leaves the selected element or any child element.
The mouseleave event is only triggered when the mouse pointer passes out of the selected element (outside the element).

You can look at a simple example to see the difference between the two

So the improved code can be

<!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>

Copy after login

Method 2: Use e.stopPropagation() to prevent the event from spreading further

e.stopPropagation() will stop further propagation of events in the capture, target processing or bubbling stages of the propagation process. After calling this method, the handler for the event on this node will be called, and the event will no longer be dispatched to other nodes.

<!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>

Copy after login

Expand your thinking:

1. What to do if there are too many child elements? Do each one need to be bound to e.stopPropagation()?

Use a jquery selector .children(), such as $('.parent').children(). Gets the child elements of each element in the set of matched elements.

The above is the entire content of this article, I hope you all like it.