Question

我已经创建了一个功能，可以根据菜单切换菜单。能见度。我还为文档分配了一个mouseup事件，如果用户单击其外的任何位置，菜单将关闭。问题是，为mouseup添加document事件侦听器时，切换不再有效。可见性测试：$menu.is(":visible");返回false，尽管菜单很明显。这里发生了什么？

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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一起触发的click，并阻止它冒泡到document。 preventDefault()在这里没有任何特定目的，它附带了我复制的代码：）

这是fiddle

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>

Mouseup事件与可见性切换冲突

2 个答案: