javascript - 一个元素上有两个事件，在运行一个时禁止另一个？

Question

如图，假设代码如下：

<ul>
    <li class="a"></li>
    <li class="b"></li>
    <li class="c"></li>
    
    <p class="A"></p>
    <p class="B"></p>
    <p class="C"></p>
</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），这应该和静止冒泡不是一回事吧？

Answer 1

一般网站都不是你这种效果，硬要弄的话就用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。

Answer 2

$(".a").click(function(e){
    if($('.A').hasClass('display-block')){
        return false;    //检测A是否已经打开，如果打开了就不执行操作；
    }
})

这样你再执行其他事件的时候就不会再打开了