Mouseup事件与可见性开关冲突

Mouseup event conflict with visibility toggle

本文关键字：开关 冲突 可见性 事件 Mouseup      更新时间：2023-09-26

我创建了一个函数，该函数根据菜单的可见性切换菜单。我还为文档分配了一个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>

一种解决方案是防止冲突区域中的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()在这里没有任何特定的目的，它是我复制的代码:)

这里是小提琴

你运行$menu。躲两次就是问题。

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

相关文章：