jqueryイベントwのmouseoutとmouseleaveの違いを共有します-jsチュートリアル-php.cn

jqueryイベントwのmouseoutとmouseleaveの違いを共有します

黄舟

リリース： 2017-06-28 11:04:58

オリジナル

1028 人が閲覧しました

この記事では主に、ドロップダウンボックスの効果を真似て、jQueryのmouseleaveとmouseoutの違いを詳しく説明します。興味のある方は参考にしてください

この記事では、jQueryのmouseleaveとmouseoutの違いを詳しく紹介します。参考までに、具体的な内容は以下の通りです
jQueryを使用してマウスホバー効果を実現する場合、一般的に多くの人がmouseoverイベントとmouseoutイベントを使用します。実装プロセス中に、いくつかの望ましくない状況が発生する可能性があります。
まず、mouseout を使用する効果を見てみましょう:

<p>先看下使用mouseout的效果：</p>
<p id="container" style="width: 300px;">
<p id="title" style="cursor: pointer; background: #ccc;">使用了mouseout事件↓</p>
<p id="list" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<p><script type=&#39;text/javascript&#39;> 
jQuery(document).ready(function($) { 
   $("#title").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   $("#container").mouseout(function() { 
     $("#list").hide(); 
   }); 
 }); 
</script>

ログイン後にコピー

1 行目、2 行目、3 行目では、mouseout イベントを使用すると、マウスがドロップダウンコンテナー内で移動するとすぐに効果が現れることがわかりました。実際、これはイベントがバブルアップするためです。つまり、イベントが同時にコンテナの子要素にバインドされる可能性があるため、この Hide() は次のようになります。マウスが各子要素の外に出るとトリガーされます。
jQuery 1.3 以降、mouseenter と Mouseleave という 2 つの新しいマウスイベントが追加されました。 Mouseout イベントとは異なり、mouseleave イベントは、マウスポインターが選択された要素から離れた場合にのみトリガーされます。
mouseleave イベントの効果を見てみましょう:

<p id="container2" style="width: 300px;">
<p id="title2" style="cursor: pointer; background: #ccc;">使用了mouseleave事件↓</p>
<p id="list2" style="display: none; position: absolute; background:#fff; border: 1px solid #ccc; width: 298px;">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
</p>
</p>
<script type=&#39;text/javascript&#39;> 
jQuery(document).ready(function($) { 
   $("#title2").mouseover(function() { 
     var offset = $(this).offset(); 
     $("#list2").css({left: offset.left, top: offset.top+19}).show(); 
   }); 
   // 绑定mouseleave事件，效果很好 
   $("#container2").mouseleave(function() { 
     $("#list2").hide(); 
   }); 
 }); 
</script>
<p>

ログイン後にコピー

1 行目、2 行目、3 行目の Mouseleave および Mouseout イベントにはそれぞれ独自の用途があります。これは、イベントのバブリングが特定の時点で非常に役立つためです
Solve p Mouseoutイベントバブリングの問題の解決策は、jquery のバインドメソッドを使用することです。例: 以下にマウスイベント p を監視する必要がある p オブジェクトがあります。マウスが下の p の外に移動すると、非表示の p
JS は次のようになります:

<p class="dpx2"><p class="dpx2_px" style="cursor:pointer;" id="searchSort">请选择排序方式↓</p>
      <p class="dpx2_px_xl" id="sortList" style="display:none;position:absolute;z-index:5;">
        <p><a class="sortA">按时间升序↑</a></p>
        <p><a class="sortA">按时间降序↓</a></p>
        <p><a class="sortA">按评论数量升序↑</a></p>
        <p><a class="sortA">按评论数量降序↓</a></p>
        <p><a class="sortA">按点击数升序↑</a></p>
        <p><a class="sortA">按点击数降序↓</a></p>
      </p>
    </p>

ログイン後にコピー

上記の説明に従って、ドロップダウン効果をシミュレートします:

1. マウスポインターが選択された要素から離れるかどうかに関係なく、またはサブ要素を使用すると、mouseout イベントがトリガーされます。

2. Mouseleave イベントは、マウスポインターが選択された要素から離れた場合にのみトリガーされます。

りー

以上がjqueryイベントwのmouseoutとmouseleaveの違いを共有しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。