マウスが子要素の上を通過したときにトリガーされるマウスアウトおよびマウスオーバーイベントの解決策

マウスが子要素の上を通過したときにトリガーされるマウスアウトおよびマウスオーバーイベントの解決策_JavaScript スキル

WBOY

リリース： 2016-05-16 15:49:06

オリジナル

1437 人が閲覧しました

実現したいこと: マウスが黒いボックスに入ると、オレンジ色のボックスがフェードインアニメーションを実行します。黒いボックスの範囲が移動すると、アニメーションはトリガーされません。マウスを外に出すと、オレンジ色のボックスが消えます。

発生した問題の説明: マウスが黒いボックスに移動すると、オレンジ色のボックスがフェードインアニメーションを実行しますが、マウスが黒いボックスからピンクのボックスに移動すると、オレンジ色のボックスが消え、その後、再度フェードインアニメーションが行われます。マウスがピンク色のボックスから黒いボックスに移動すると、再びオレンジ色のボックスのフェードインアニメーションが実行されます。これは私が望んでいることではありません。

初期コード:

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

ログイン後にコピー

まず、これらの問題が発生する理由を説明します。

マウスが黒いボックスからピンクのボックスに移動すると、黒いボックスのマウスアウトがトリガーされ、イベントバブリングにより、すぐに黒いボックスのマウスオーバーイベントがトリガーされるため、実際にはオレンジ色のボックスが先に消えてから、すぐにフェードインアニメーションを実行します。これが私たちが見ているプロセスです。

マウスがピンクのボックスから黒いボックスに移動すると、黒いボックスのマウスアウトが再びトリガーされます (マウスが選択された要素またはそのサブ要素を通過するかどうかに関係なく、mouseover イベントがトリガーされるため)。同時にマウスオーバーもトリガーされるため、フェードイン効果を再度実行するプロセスがあります。

方法 1: Mouseover/mouseout の代わりに MouseLeave/mouseout を使用する [最良の方法]

まず、mouseout&mouseover と Mouseleave&mouseenter の使用法の違いを見てみましょう

マウスオーバーとマウス入力

マウスポインターが選択された要素またはそのサブ要素を通過するたびに、mouseover イベントがトリガーされます。
Mouseenter イベントは、マウスポインターが要素の外側から選択された要素 (要素内) に入ったときにのみトリガーされます。

マウスアウトとマウス離れる

マウスアウトイベントは、マウスポインターが選択した要素または子要素から離れるかどうかに関係なくトリガーされます。
Mouseleave イベントは、マウスポインターが選択された要素の外 (要素の外側) を通過した場合にのみトリガーされます。

簡単な例を見て、2 つの違いを確認できます

改良されたコードは次のようになります。

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

ログイン後にコピー

方法 2: 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() にバインドする必要がありますか?

$('.parent').children() などの jquery セレクター .children() を使用します。一致した要素のセット内の各要素の子要素を取得します。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。