javascript - 一个元素上有两个事件,在运行一个时禁止另一个?
本文介绍了javascript - 一个元素上有两个事件,在运行一个时禁止另一个?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
如图,假设代码如下:
<ul>
<li class="a"></li>
<li class="b"></li>
<li class="c"></li>
<div class="A"></div>
<div class="B"></div>
<div class="C"></div>
</ul>
// 点击A以外的元素关闭弹窗
$(document).mouseup(function(e){
var _con = $('.A'); // 设置目标区域
if(!_con.is(e.target) && _con.has(e.target).length === 0 ){
$('A).removeClass('display-block');
};
});
问题来了,点击a显示了A,点击A以外的元素关闭A,但是点击a的时候,看上去窗口没有关闭,其实是进行了关闭操作,紧接着进行了打开操作,如何使A窗口打开后a按钮变成关闭按钮或者失效(a失效,b有效,点击打开B),这应该和静止冒泡不是一回事吧?
解决方案
一般网站都不是你这种效果,硬要弄的话就用one来绑定。
$(".a").one("click",function(event){
$(".A").addClass("display-block");
event.stopPropagation();
})
$(document).on("click",function(event){
if($(event.target).closest(".A").length === 0 ){
$('.A').removeClass('display-block');
};
$(".a").one("click",function(event){
$(".A").addClass("display-block");
return false;
})
});
另一种方式,就是给a加一个透明遮罩层让他点不到。
还有一种方式,实现效果一样,实际实现方式逻辑并不一样。
$(".a").on("click",function(){
$(".A").toggleClass("display-block");
event.stopPropagation();
})
把addClass改成toggleClass,你点a看上去跟没有生效一样,其实是生效了的,效果是关闭A。
这篇关于javascript - 一个元素上有两个事件,在运行一个时禁止另一个?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文