懸停事件在兒童懸停時發射兩次

Question

我模擬了一個簡單的多級下拉框，並且無法弄清楚如何在懸停li時讓懸停事件僅觸發一次。當列表項內部的a標籤懸停時，懸停事件觸發兩次。

這是一個演示問題的jsFiddle。我在a標記周圍添加了額外的填充以顯示事件如何觸發兩次。如果只填充空格，事件將會觸發一次，但一旦標記被徘徊，它將再次觸發。

HTML：

<ul class="dropit"> 
    <li><a href="#">Thing 1</a></li> 
    <li><a href="#">Thing 2</a></li> 
    <li><a href="#">Thing 3</a> 
     <ul> 
     <li><a href="#">Sub-thing 1</a></li> 
     <li><a href="#">Sub-thing 2</a> 
      <ul class='sub-menu'> 
      <li><a href="#">Sub-sub-thing 1</a></li> 
      <li><a href="#">Sub-sub-thing 2</a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
</ul> 

的jQuery：

$(document).ready(function(e) { 
    $('ul.dropit li').on('mouseover', function(event) { 
     $target = $(event.currentTarget); 
     $sub = $target.children('ul').first(); 
     $sub.slideToggle(); 
    }).on('mouseout', function(event) { 
     $target = $(event.currentTarget); 
     $target.children('ul').first().slideToggle(); 
    }); 
}); 

jsFiddle demonstration

Answer 1

使用mouseenter和mouseleave代替mouseover和mouseout

FIDDLE

$(document).ready(function(e) { 
    $('ul.dropit li').on('mouseenter', function(event) { 
     $target = $(event.currentTarget); 
     $sub = $target.children('ul').first(); 
     $sub.slideToggle(); 
    }).on('mouseleave', function(event) { 
     $target = $(event.currentTarget); 
     $target.children('ul').first().slideToggle(); 
    }); 
});​ 

mouseover將鼠標懸停在子元素上時會觸發。

mouseenter無論有多少孩子被徘徊，只會發一次火。

Answer 2

jsFiddle demo

只使用.hover()

，另外防止難看的幻燈片上反覆徘徊走勢建隆 使用：.stop()

$('.dropit li:has("ul")').hover(function() { 
    $('>ul', this).stop().slideToggle(); 
});