Mouseup事件與可見性切換沖突

Question

我創建了一個根據菜單的可見性切換菜單的功能。 我還為文檔分配了mouseup事件，如果用戶單擊文檔外部的任何位置，菜單都會關閉。 問題是，當為document添加mouseup事件偵聽器時，切換功能不再起作用。 可見性測試： $menu.is(":visible"); 盡管菜單清晰可見，但仍返回false 。 這里發生了什么？

 $(function() { var $toggleMenu = $(".toggle-menu"), $menu = $(".menu"); $toggleMenu.on("click", function(e) { e.preventDefault(); toggleUserMenu(); }); $(document).on("mouseup", function (e) { if (!$menu.is(e.target) && $menu.has(e.target).length === 0) { $menu.hide(); } }); function toggleUserMenu() { var menuIsVisible = $menu.is(":visible"); if (menuIsVisible) { $menu.hide(); } else { $menu.show(); } } }); 

 .toggle-menu { color: #444; display: inline-block; margin-bottom: 15px; text-decoration: none; } .menu { border: 1px solid black; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="toggle-menu">Toggle Menu</a> <div class="menu"> <a href="#" class="menu-item">Menu Item 1</a> <a href="#" class="menu-item">Menu Item 2</a> <a href="#" class="menu-item">Menu Item 3</a> </div> 

Answer 1

一種解決方案可以是通過防止mouseup在沖突區域冒泡。

$(function() {
  var $toggleMenu = $(".toggle-menu"),
      $menu = $(".menu");

  $toggleMenu.on("click", function(e) {
    e.preventDefault();

    toggleUserMenu();
  });

  $toggleMenu.on("mouseup", function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

  $(document).on("mouseup", function (e) {

    if (!$menu.is(e.target) && $menu.has(e.target).length === 0) {
      $menu.hide();
    }
  });

  function toggleUserMenu() {
    var menuIsVisible = $menu.is(":visible");
console.log(menuIsVisible);
    if (menuIsVisible) {
      $menu.hide();
    } else {
      $menu.show();
    }
  }
});

---

  $toggleMenu.on("mouseup", function(e) {
    e.preventDefault();
    e.stopPropagation();
  });

這將捕獲與click “切換按鈕”一起觸發的mouseup ，並阻止其冒泡至document 。 preventDefault()在這里沒有任何特定用途，它隨我復制的代碼一起提供:)

這是一個小提琴

Answer 2

您運行$ menu.hide兩次，這是有問題的。

 $(function() { var $toggleMenu = $(".toggle-menu"), $menu = $(".menu"); $toggleMenu.on("click", function(e) { e.preventDefault(); toggleUserMenu(); }); $(document).on("mouseup", function (e) { console.log("Event is still firing"); if (!$menu.is(e.target) && $menu.has(e.target).length === 0) { //if you commment this the code work. // $menu.hide(); } }); function toggleUserMenu() { var menuIsVisible = $menu.is(":visible"); if (menuIsVisible) { $menu.hide(); } else { $menu.show(); } } }); 

 .toggle-menu { color: #444; display: inline-block; margin-bottom: 15px; text-decoration: none; } .menu { border: 1px solid black; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="" class="toggle-menu">Toggle Menu</a> <div class="menu"> <a href="#" class="menu-item">Menu Item 1</a> <a href="#" class="menu-item">Menu Item 2</a> <a href="#" class="menu-item">Menu Item 3</a> </div>