点击Modal内部时弹窗意外关闭，如何实现仅外部点击关闭？

问题根源 #

1. 重复绑定事件：每次点击打开按钮时，都会调用close_modal()给document绑定新的mouseup事件，导致多次触发关闭逻辑。
2. 点击区域判断错误：原代码仅判断e.target是否为.modal或.modal-active，但点击Modal内部子元素（如.modal-content）时，e.target是子元素，不满足条件，会被误判为外部点击。

修改方案及代码 #

优化后的JavaScript代码

/* Ready Function */
$(function(){
    $('.modal-block').each(function(){
        let mb = new Modal($(this));
    });
});
const Modal = function(this$obj){
    this.$obj = this$obj;
    this.init();
}
Modal.prototype.init = function init(){
    this.modal_setup();
    this.bind_close_event(); // 移至初始化阶段，仅绑定一次关闭事件
};

Modal.prototype.modal_setup = function modal_setup(){
    let _this = this;
    let trigger = this.$obj.find('.toggle');
    let modal = this.$obj.find('.modal');
    
    trigger.on('click',function(e){
        e.stopPropagation(); // 阻止事件冒泡，避免刚打开就触发document的mouseup
        modal.addClass('modal--active');
    });
}

// 单独绑定关闭事件，仅执行一次
Modal.prototype.bind_close_event = function bind_close_event(){
    let _this = this;
    $(document).on('mouseup', function(e)
    {
        let modal = _this.$obj.find('.modal');
        // 判断点击目标是否在Modal外部
        if (!modal.is(e.target) && modal.has(e.target).length === 0) {
            modal.removeClass('modal--active');
        }
    });
}

可选优化CSS（增强交互体验）

.modal {
  display:none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* 添加半透明背景，区分内外区域 */
}
.modal--active {
  display:block;
}
.modal-content {
  background-color: white;
  margin: 15% auto;
  padding: 20px;
  width: 70%;
}

HTML代码（保持不变）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-block">
<button type="button" class="toggle">
open modal
</button>
<div class="modal">
  <div class="modal-content">
    <span class="title">title</span>
    <!-- 可添加内部元素测试，比如按钮 -->
    <button>内部操作按钮</button>
  </div>
</div>
</div>

关键修改说明 #

• 将关闭事件绑定移至init方法，确保仅绑定一次，避免重复触发。
• 打开按钮点击事件中添加e.stopPropagation()，防止事件冒泡到document导致Modal刚打开就关闭。
• 关闭判断逻辑改为!modal.is(e.target) && modal.has(e.target).length === 0：只有当点击目标既不是Modal本身，也不是Modal的后代元素时，才执行关闭操作。

内容的提问来源于stack exchange，提问作者DigitalDesigner