javascript - 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();
  });

这将捕获与切换按钮上的单击一起触发的mouseup，并阻止其冒泡到document。 preventDefault() 在这里没有任何特定目的，它随我复制的您的代码一起提供:)

这是一个fiddle