Mouseup事件与可见性开关冲突
Mouseup event conflict with visibility toggle
我创建了一个函数,该函数根据菜单的可见性切换菜单。我还为文档分配了一个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>
相关文章:
- Javascript-ID冲突的几率
- AngularJS ng开关或类似的动态值工作
- 基于下拉菜单创建开关
- Javascript开关不工作
- 导致内容安全策略(CSP)冲突错误的本地jquery.js文件
- Pg承诺性能提升:在冲突中
- 引导开关不工作
- 数据与Javascript中的继承冲突
- Angular ng控制器与ng应用程序冲突
- 返回按钮代码段的Jquery冲突
- 调试一个简单的jQuery函数;想知道是否与其他代码冲突
- 使用JavaScript和HTML5画布进行冲突检测
- javascript对象原型与jquery冲突
- jQuery与导航菜单上的mouseover事件冲突.
- Javascript滑块不滑动,如何判断是否存在JS冲突
- 如何定义星期日和平日.按日期使用开关
- Bing语音和Bing地图在Windows 8应用商店应用程序中冲突
- Javascript两个日期选择器冲突
- Sequelize:属性之间的命名冲突'播放列表'以及关联'播放列表'
- Mouseup事件与可见性开关冲突