点击模态框外部时关闭模态框功能失效求助

你尝试用JavaScript实现点击模态框外部关闭模态框，但功能未生效，你的代码如下：

var clickHandler = function () {
    if (!f.target) f.target = f.srcElement;
    if (f.target.tagName == "DIV") {
        if (f.target.id != "window") closeModal(f);
}

以下是可行的解决思路：

• 修正事件对象的使用：代码里的f未声明为事件参数，应该在函数里接收事件对象，同时兼容旧浏览器的写法：

  var clickHandler = function (event) {
    // 兼容IE的事件对象获取
    event = event || window.event;
    var target = event.target || event.srcElement;
    // 后续逻辑...
  };
  

• 优化外部点击的判断逻辑：只判断DIV标签太局限，且容易误判。可以利用closest()方法直接检查点击元素是否属于模态框内部，若不属于则关闭：

  var clickHandler = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    // 若点击的元素找不到#window这个祖先元素，说明点击在外部
    if (!target.closest('#window')) {
      closeModal(event);
    }
  };
  

• 确保事件绑定到正确的元素：要把点击事件绑定到document或者模态框的遮罩层上，而不是模态框本身，这样点击外部区域才会触发事件：

  // 绑定到document
  document.addEventListener('click', clickHandler);
  // 若有遮罩层，也可以绑定到遮罩层
  // document.getElementById('modal-overlay').addEventListener('click', clickHandler);
  

• 阻止模态框内部点击的事件冒泡：如果点击模态框内部不想触发关闭，需要在模态框的点击事件里阻止冒泡，避免事件传到外层触发关闭逻辑：

  document.getElementById('window').addEventListener('click', function (event) {
    event.stopPropagation();
  });
  

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