我创建了一个函数,可以根据菜单的可见性来切换菜单。我还为文档分配了一个 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
,并阻止其冒泡到document
。 preventDefault()
在这里没有任何特定目的,它随我复制的您的代码一起提供:)
这是一个fiddle
关于javascript - Mouseup 事件与可见性切换冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33086790/