jQueryの.hover（）または.mouseleaveは（）、クロム

Question

問題の説明に取り組んでいません。 これはクロムブラウザでのみ発生しました。

私のメニューには他の.click()イベントがありますが、クリックするたびに.mouseleave()イベントが実行されます。

$(document).ready(function() { 
 
    $("#nav1 li").hover(
 
    function() { 
 
     $(this).find('ul').slideDown(); 
 
    }, 
 
    function() { 
 
     $(this).find('ul').slideUp(); 
 
    }); 
 
});

#nav1 a { 
 
    color: #FFFFFF; 
 
} 
 

 
#nav1 li ul li a:hover { 
 
    background-color: #394963; 
 
} 
 

 
div ul li ul { 
 
    background-color: #4a5b78; 
 
    list-style: none 
 
} 
 

 
#nav1 > li > a { 
 
    padding: 16px 18px; 
 
    display: block; 
 
    border-bottom: 2px solid #212121; 
 
} 
 

 
#nav1 li ul li a { 
 
    padding: 10px 0; 
 
} 
 

 
div { 
 
    background-color: #000000; 
 
    background-color: #343434; 
 
    width: 280px; 
 
} 
 
/* Hide Dropdowns by Default */ 
 
#nav1 li ul { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <ul id="nav1"> 
 
    <li><a href="#">Hover here and infinite click</a> 
 
    <ul> 
 
     <li><a href="#">Stage1</a></li> 
 
     <li><a href="#">Stage2</a></li> 
 
     <li><a href="#">Stage3</a></li> 
 
     <li><a href="#">Stage4</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Menu Heading 2</a> 
 
     <ul> 
 
     <li><a href="#">Stage1</a></li> 
 
     <li><a href="#">Stage2</a></li> 
 
     <li><a href="#">Stage3</a></li> 
 
     <li><a href="#">Stage4</a></li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 
<div>

"ここにホバーと無限クリックし、" この問題を参照してくださいするにはここをクリックしてください。

EDIT：あなたたちが言ったように

、問題は、この例で発生します。 ビデオは次のとおりです：Video link

Answer 1

あなたはブラウザが要素の参照を失った多くの回をクリックすると、この例を試してみてください。

 <div id="container"> 
      <ul id="nav1"> 
      <li><a href="#">Menu Heading 1</a> 
      <ul> 
       <li><a href="#">Stage1</a></li> 
       <li><a href="#">Stage2</a></li> 
       <li><a href="#">Stage3</a></li> 
       <li><a href="#">Stage4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Menu Heading 2</a> 
       <ul> 
       <li><a href="#">Stage1</a></li> 
       <li><a href="#">Stage2</a></li> 
       <li><a href="#">Stage3</a></li> 
       <li><a href="#">Stage4</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Menu Heading 3</a> 
      <ul> 
       <li><a href="#">Stage1</a></li> 
       <li><a href="#">Stage2</a></li> 
       <li><a href="#">Stage3</a></li> 
       <li><a href="#">Stage4</a></li> 
      </ul> 
      </li> 
     </ul> 
     <div> 

のCss

 ul, 
     li, 
     a { 
      padding: 0px; 
      margin: 0px; 
     } 

     .show { 
      display: block !important; 
     } 

     #nav1 a { 
      color: #FFFFFF; 
     } 

     #nav1 li ul li a:hover { 
      background-color: #394963; 
     } 

     div ul li ul { 
      background-color: #4a5b78; 
      list-style: none 
     } 

     #nav1 > li > a { 
      background-color: #343434; 
      padding: 16px 18px; 
      text-decoration: none; 
      display: block; 
      border-bottom: 2px solid #212121; 
      background: linear-gradient(top, #343434, #111111); 
     } 

     #nav1 li ul li a { 
      padding: 10px 0; 
      padding-left: 30px; 
      text-decoration: none; 
      display: block; 
     } 

     div { 
      background-color: #000000; 
      background-color: #343434; 
      width: 280px; 
     } 
     /* Hide Dropdowns by Default */ 
     #nav1 li ul { 
      display: none; 
     } 

JS

 $(document).ready(function() { 
      $("#nav1 li").hover(
      function(e) { 
       let ulMenu = $(this).find('ul'); 
       ulMenu.addClass('show'); 
       //$(this).find('ul').slideDown();  
      }, 
      function(e) { 
       if(e.relatedTarget){ 
       let ulMenu = $(this).find('ul'); 
       ulMenu.removeClass('show'); 
       } else { 
       console.log('fail '); 
       } 
       //$(this).find('ul').slideUp(); 
      }); 
     }); 

Codepen Example Worksを

Answer 2

クリックイベントにstropPropagationを追加できます。

$("#nav1 li").click(
    function(e){ 
     e.stopPropagation(); 
    }); 

多分イベントはプロセスで迷子にされ、それを確認してみてください、そしてので、実際の要素を設定している場合。 この参照：https://api.jquery.com/event.relatedTarget/