Solution aux événements mouseout et mouseover déclenchés lorsque la souris passe sur un enfant element

Solution aux événements mouseout et mouseover déclenchés lorsque la souris passe sur un enfant element_javascript skills

WBOY

Libérer： 2016-05-16 15:49:06

original

1437 Les gens l'ont consulté

Ce que je veux réaliser : Lorsque la souris entre dans la boîte noire, la boîte orange effectue une animation de fondu entrant ; lorsque la plage de la boîte noire se déplace (même si elle dépasse la boîte rose, l'animation n'est toujours pas déclenchée) ; lorsque la souris sort, la case orange disparaît.

Explication du problème rencontré : Lorsque la souris passe dans la case noire, la case orange effectue une animation de fondu entrant, mais lorsque la souris passe de la case noire à la case rose, la case orange disparaît, puis le L'animation de fondu entrant est à nouveau exécutée. Lorsque la souris passe de la case rose à la case noire, l'animation de fondu entrant de la case orange est à nouveau exécutée. Ce n'est pas ce que je veux.

Code initial :

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

Copier après la connexion

Nous expliquons d’abord les raisons pour lesquelles ces problèmes surviennent.

Lorsque la souris passe de la boîte noire à la boîte rose, la sortie de la souris de la boîte noire est déclenchée, et en raison de l'événement bouillonnant, l'événement mouseover de la boîte noire est déclenché immédiatement, donc en fait, la boîte orange disparaît d'abord, puis effectuez immédiatement l'animation de fondu entrant. C'est le processus que nous voyons.

Lorsque la souris passe de la case rose à la case noire, le mouseout de la case noire est à nouveau déclenché (car peu importe que la souris passe par l'élément sélectionné ou ses sous-éléments, l'événement mouseover est déclenché), et le survol de la souris est également déclenché en même temps. Il y a donc à nouveau le processus de réalisation de l'effet de fondu.

Méthode 1 : Utiliser mouseleave/mouseout au lieu de mouseover/mouseout [Meilleure méthode]

Regardons d'abord la différence d'utilisation entre mouseout&mouseover et mouseleave&mouseenter

survol de la souris et entrée de la souris

L'événement mouseover sera déclenché chaque fois que le pointeur de la souris passe par l'élément sélectionné ou ses sous-éléments.
L'événement mouseenter ne sera déclenché que lorsque le pointeur de la souris passe de l'extérieur de l'élément dans l'élément sélectionné (dans l'élément).

mouseout et mouseleave

L'événement mouseout sera déclenché si le pointeur de la souris quitte l'élément sélectionné ou tout élément enfant.
L'événement mouseleave n'est déclenché que lorsque le pointeur de la souris sort de l'élément sélectionné (en dehors de l'élément).

Vous pouvez regarder un exemple simple pour voir la différence entre les deux

Le code amélioré peut donc être

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

Copier après la connexion

Méthode 2 : utilisez e.stopPropagation() pour empêcher l'événement de se propager davantage

e.stopPropagation() arrêtera la propagation ultérieure des événements dans les étapes de capture, de traitement de la cible ou de bouillonnement du processus de propagation. Après avoir appelé cette méthode, le gestionnaire de l'événement sur ce nœud sera appelé et l'événement ne sera plus distribué aux autres nœuds.

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

Copier après la connexion

Élargissez votre réflexion :

1. Que faire s'il y a trop d'éléments enfants ? Chacun doit-il être lié à e.stopPropagation() ?

Utilisez un sélecteur jquery .children(), tel que $('.parent').children(). Obtient les éléments enfants de chaque élément dans l’ensemble des éléments correspondants.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.