gpt4 book ai didi

javascript - 有条件地绑定(bind)/取消绑定(bind)事件监听器

转载 作者:行者123 更新时间:2023-11-28 06:49:29 25 4
gpt4 key购买 nike

借助这个post我能够组合一个菜单,通过切换链接或单击链接外部(通过鼠标向上)来关闭该菜单。问题在于,由于此 mouseup 事件处理程序绑定(bind)到文档对象,因此无论菜单是否打开,都会不断触发该事件处理程序。

我想知道如何仅在菜单可见时有条件地设置此处理程序?我不一定想直接调用: $(document).off("mouseup"); ,因为这个切换曾经被触发以启动 $toggleMenu.on( “click”, function() {...}) 通过 $(document).on("mouseup")

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

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

toggleUserMenu();
});

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

$(document).on("mouseup", function (e) {
console.log("Event is still firing");

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>

最佳答案

我会移动你的$(document).on("mouseup")像这样的toggleUserMenu代码:

  function toggleUserMenu() {
var menuIsVisible = $menu.is(":visible");

if (menuIsVisible) {
$menu.hide();
$(document).off("mouseup.my-menu");
} else {
$menu.show();
$(document).on("mouseup.my-menu", function (e) {... });
}

注意,我使用带有命名空间的事件来避免出现 $(document).off("mouseup"); 的情况。将取消订阅所有mouseup处理程序。

关于javascript - 有条件地绑定(bind)/取消绑定(bind)事件监听器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33087919/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com