jQuery mouseleaveのトラブル

Question

この構造のメニューを作成しようとしています：

<ul id="primary" class="menuOptions">
     <li>Item 1</li>
     <li>Item 2
         <div id="secondary">
            <ul class="menuOptions">
               <li>subItemOne</li>
               <li>subItemTwo</li>
           </ul>
         </div>
     </li>
     <li>Item 3</li>
</ul>

このスクリプトでアニメーション化しています：

$j('.menuOptions li').each(function(i){
//applies to all menu options
    $j(this)
   .bind('mouseover',function() {
          $j(this).toggleClass("over");
       })
       .bind('mouseleave',function() {
          $j(this).toggleClass("over");
       });                  
  });

マウスがセカンダリメニュー項目の上を移動すると、toggleClass関数がプライマリメニュー項目で呼び出されることがわかりました。 mouseleaveは、マウスが子から離れるまで呼び出されることはないので、混乱しています。

何らかの方法でイベントの伝播を積極的に停止する必要がありますか？

ありがとう！

ティム

Answer 1

ホバー機能を使用するだけで試すことができます。

$j('ul.menuOptions li').hover(function(){
          $j(this).toggleClass("over");
       } ,
       function() {
          $j(this).toggleClass("over");
       }
);

Answer 2

問題は mouse over を mouse leave と結合していることだと思います。

http://api.jquery.com/category/events/mouseを参照-events /

一般に、必要なカップリングは次のとおりです。

• マウス enter とマウス leave
• マウス上 とマウスアウト 。

他の組み合わせを使用すると、望ましくない動作が発生する場合があります。 マウス over およびマウス out は古いイベントであり、時々有用ですが、一般的により劣っていますマウス入力 およびマウス退出 。

また、次のものを使用して単純に物事を試みることもできます。 ホバー 、マウス enter およびマウス leave を使用するのとまったく同じです。 。