Lösung für Mouseout- und Mouseover-Ereignisse, die ausgelöst werden, wenn die Maus über die Fähigkeiten eines untergeordneten Elements fährt-js-Tutorial-php.cn

Lösung für Mouseout- und Mouseover-Ereignisse, die ausgelöst werden, wenn die Maus über die Fähigkeiten eines untergeordneten Elements fährt

WBOY

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

Original

1450 Leute haben es durchsucht

Was ich erreichen möchte: Wenn die Maus in die Blackbox eintritt, führt die orange Box eine Einblendanimation aus, wenn sich der Blackbox-Bereich bewegt (selbst wenn sie die rosa Box passiert, wird die Animation immer noch nicht ausgelöst); Wenn die Maus herausbewegt wird, verschwindet das orangefarbene Kästchen.

Erklärung des aufgetretenen Problems: Wenn sich die Maus in das schwarze Feld bewegt, führt das orangefarbene Feld eine Einblendanimation aus. Wenn die Maus jedoch vom schwarzen Feld zum rosafarbenen Feld wechselt, verschwindet das orangefarbene Feld und dann das Die Einblendanimation wird erneut ausgeführt. Wenn sich die Maus aus der rosa Box in die schwarze Box bewegt, wird die Einblendanimation der orangen Box erneut ausgeführt. Das ist nicht das, was ich will.

Anfangscode:

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

Nach dem Login kopieren

Zuerst erklären wir die Gründe, warum diese Probleme auftreten.

Wenn sich die Maus von der Blackbox zur Pinkbox bewegt, wird das Mouseover der Blackbox ausgelöst, und aufgrund des Ereignissprudelns wird sofort das Mouseover-Ereignis der Blackbox, also tatsächlich der Orangebox, ausgelöst verschwindet zuerst und führt dann sofort die Einblendanimation aus. Dies ist der Prozess, den wir sehen.

Wenn sich die Maus von der rosa Box zur schwarzen Box bewegt, wird das Mouseover-Ereignis aus der Blackbox erneut ausgelöst (denn unabhängig davon, ob die Maus über das ausgewählte Element oder seine Unterelemente geht, wird das Mouseover-Ereignis ausgelöst). und gleichzeitig wird auch das Mouseover ausgelöst. Es erfolgt also erneut der Vorgang des Einblendens.

Methode 1: Verwenden Sie Mouseleave/Mouseout anstelle von Mouseover/Mouseout [Beste Methode]

Sehen wir uns zunächst den Unterschied in der Verwendung zwischen Mouseout&Mouseover und Mouseleave&Mouseenter an

Mouseover und MouseEnter

Das Mouseover-Ereignis wird immer dann ausgelöst, wenn der Mauszeiger über das ausgewählte Element oder seine Unterelemente verläuft.
Das Mouseenter-Ereignis wird nur ausgelöst, wenn der Mauszeiger von außerhalb des Elements in das ausgewählte Element (in das Element) gelangt.

Mouseout und Mouseleave

Das Mouseout-Ereignis wird unabhängig davon ausgelöst, ob der Mauszeiger das ausgewählte Element oder ein untergeordnetes Element verlässt.
Das Mouseleave-Ereignis wird nur ausgelöst, wenn der Mauszeiger das ausgewählte Element verlässt (außerhalb des Elements).

Sie können sich ein einfaches Beispiel ansehen, um den Unterschied zwischen den beiden zu erkennen

So kann der verbesserte Code

sein

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

Nach dem Login kopieren

Methode 2: Verwenden Sie e.stopPropagation(), um eine weitere Ausbreitung des Ereignisses zu verhindern

e.stopPropagation() stoppt die weitere Ausbreitung von Ereignissen in den Erfassungs-, Zielverarbeitungs- oder Bubbling-Phasen des Ausbreitungsprozesses. Nach dem Aufruf dieser Methode wird der Handler für das Ereignis auf diesem Knoten aufgerufen und das Ereignis wird nicht mehr an andere Knoten gesendet.

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

Nach dem Login kopieren

Erweitern Sie Ihr Denken:

1. Was tun, wenn es zu viele untergeordnete Elemente gibt? Muss jedes einzelne an e.stopPropagation() gebunden werden?

Verwenden Sie einen JQuery-Selektor .children(), z. B. $('.parent').children(). Ruft die untergeordneten Elemente jedes Elements im Satz übereinstimmender Elemente ab.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.