爲什麼jQuery觸發兩次觸發器？

Question

我有一些簡單的jQuery隱藏和顯示菜單。當你在菜單外單擊時，它應該隱藏它。但是，如果我點擊菜單的觸發目標（例如鏈接），它將隱藏然後重新打開菜單，而不是隱藏它。

var notifyMenu = $(".notifyMenu .menu"); 

if (!notifyMenu.is(e.target) // if the target of the click isn't the container... 
&& notifyMenu.has(e.target).length === 0) // ... nor a descendant of the container 
{ 
    notifyMenu.hide(); 
    screenOverlay.hide(); 

} 


$('.notifyMenu > a').click(function(event) { 
    var menuID = $(this).parent().prop("id"); 
    var notifyMenu = $('#' + menuID + ' .menu'); 

    if (notifyMenu.is(':visible')) { 
     screenOverlay.fadeOut(); 
     notifyMenu.fadeOut('fast'); 
    } else { 
     // Show screenoverlay if on mobile 
     if (ftrNav.is(':visible')) { 
      screenOverlay.fadeIn('fast'); 
     } 
     notifyMenu.fadeIn('fast'); 
    } 

    event.preventDefault(); 

}); 

的HTML看起來像這樣：

<li id="userLI" class="notifyMenu"> 
      <a href="/player/profile"> 
       &nbsp; 
       <div class="profilePhoto">JM</div> 
       <span class="fa fa-angle-down"></span> <div class="numVal"></div> 
      </a> 

      <div class="menu playerMenu" style="display: block;"> 
       <div class="upArrow"></div> 
       <ul> 
        <li class="playerDetails"> 
         <div class="name">Jon Marus</div> 
         <div class="access"> 
          MANAGER (Spare)      </div> 
        </li> 
        <li><a href="/player/profile/"><div class="icon fa fa-user-circle-o" title="Player Profile"></div> Profile</a></li> 
        <li><a href="/player/notifications"><div class="icon fa fa-bell"></div> Notifications</a></li> 
        <li><a href="/player/password"><div class="icon fa fa-lock"></div> Change Password</a></li> 
        <li><a href="/logout"><div class="icon fa fa-sign-out" title="Logout"></div> Logout</a></li> 
       </ul> 
      </div> 
     </li> 

任何想法？

Answer 1

這是DOM事件的工作原理。每個事件都會傳播到文檔對象。

因此，您需要將event.stopPropagation()添加到onclick菜單。然後，單擊菜單時文檔的onclick事件處理程序將不會被調用。

例子：

$(document).on('click', function() { 
    //Hide the menu etc... 
    $('.notifyMenu .menu').hide(); 
} 

$('.notifyMenu .menu').on('click', function(e) { 
    //Show or toggle code goes here 
    $('.notifyMenu .menu').show(); 
    e.stopPropagation(); 
});