一个元素上有两个事件，在运行一个时禁止另一个？
如图，假设代码如下：
<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），这应该和静止冒泡不是一回事吧？
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
1
条回答
写回答
-
IT从业
一般网站都不是你这种效果，硬要弄的话就用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
2019-07-17 19:34:01赞同 展开评论
相关问答