求助：Safari浏览器中Modal触摸事件失效，无法关闭弹窗

我帮你搞定这个Safari浏览器里的模态框问题！你遇到的情况是Safari对event.target的处理逻辑和Chrome、Firefox这些浏览器不一样，导致原来的判断条件失效了。

问题根源 #

在Safari里，当你点击模态框外部区域时，event.target并不一定会精准指向你的modal元素——可能是Safari的事件机制在传递过程中，把目标元素指向了一些隐性的渲染节点，或者对元素的判定规则更严格，导致event.target === modal这个等式不成立。

靠谱的修复方案 #

给你两种经过验证的解决办法，都能在Safari里正常工作：

方案1：用closest()方法精准判断点击范围

把原来的判断逻辑换成检查点击的元素是否属于模态框内部，代码改成这样：

var modal = document.getElementById('myModal');
document.getElementById("modal-body").innerHTML += "hello!";
modal.style.display = "block";

window.onclick = function(event) {
  // 如果点击的元素找不到#myModal这个祖先（包括自身），说明点击在外部
  if (!event.target.closest('#myModal')) {
    modal.style.display = "none";
  }
};

closest()方法会从点击的元素往上找，直到找到匹配选择器的元素，找不到就返回null，这个方法在Safari 10及以上版本都支持，兼容性拉满。

方案2：用contains()方法判断元素归属

另一种思路是判断点击的元素是否在模态框内部，不在的话就关闭弹窗：

var modal = document.getElementById('myModal');
document.getElementById("modal-body").innerHTML += "hello!";
modal.style.display = "block";

document.addEventListener('click', function(event) {
  // 模态框显示状态下，点击的元素不在模态框内部就关闭
  if (modal.style.display === 'block' && !modal.contains(event.target)) {
    modal.style.display = "none";
  }
});

contains()方法是浏览器原生支持的，用来检查一个元素是否是另一个元素的后代（包括自身），所有现代浏览器（当然也包括Safari）都能正常识别。

额外优化建议 #

另外建议你把模态框的CSS样式补全，确保背景层完全覆盖整个视口，避免出现点击“漏网”区域：

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background-color: rgba(0,0,0,0.5); /* 可选半透明背景，提升用户体验 */
}
/* 模态框内容层要放在背景之上 */
.modal-content {
  position: relative;
  z-index: 2;
  /* 这里可以加居中、宽高、padding等样式 */
}

这样能保证模态框的背景层完全铺满屏幕，不管在哪个浏览器里，点击外部区域都能触发关闭逻辑。

内容的提问来源于stack exchange，提问作者Marcin Gałązka