弹窗覆盖层中event.preventDefault()拦截链接跳转失效问题

问题复现代码 #

实现HTTP链接拦截的初始化逻辑：

const container = document.querySelector('#container-id');
let links = container.querySelectorAll('a');
for (var link of links) {
  link.addEventListener('mousedown', self.blockUnsafeLink, false);
}

事件处理函数逻辑：

this.blockUnsafeLink = function (){
  let href = this.href;
  if ( href.match(/^(http:\/\/)+/gi) ) {
    console.log(event);
    event.preventDefault();
    // 自定义拦截逻辑
  }
}

异常表现 #

• 普通页面下拦截逻辑正常，HTTP链接不会直接跳转
• 覆盖式弹窗内的HTTP链接无法被拦截，点击后正常跳转
• 控制台打印的事件对象属性看似正常：cancelable: true、defaultPrevented: true、事件target为对应a标签
• 给event.preventDefault()加断点调试时，弹窗内的拦截又能正常生效

根本原因 #

两个代码缺陷叠加，加上弹窗的特殊运行逻辑导致了异常：

1. 依赖非标准全局事件对象，引用错误
   事件处理函数没有声明形参接收事件实例，直接调用了全局作用域下的window.event。这个属性是早期IE遗留的非标准实现，只会在事件触发的同步执行栈内、无其他事件插入时，临时指向当前触发的事件。
   普通页面没有额外逻辑干扰，函数执行时全局event刚好绑定到当前a标签的mousedown事件，调用preventDefault可以正常生效。
   覆盖式弹窗普遍自带焦点切换、点击外部关闭、层级重绘的逻辑，会在mousedown触发的同步流程中调度其他事件（比如弹窗容器的焦点事件、位置校验事件），等代码执行到event.preventDefault()时，全局window.event已经被新产生的事件覆盖，此时调用preventDefault操作的是完全无关的事件对象，自然拦不住a标签跳转。控制台打印的defaultPrevented: true只是那个无关事件的属性，和当前a标签没有关系。
   断点调试时JS主线程被完全暂停，不会有新事件写入全局event对象，代码操作的是正确的事件实例，所以拦截会生效。
2. 监听事件类型错误，拦截时机不对
   a标签的默认跳转行为是绑定在click事件上的，mousedown只是鼠标按下的前置事件，本身不直接触发跳转。普通页面中鼠标按下后不会移动、DOM也不会重排，mousedown后会在同一个元素上依次触发mouseup、click，阻止mousedown的默认行为会顺带阻断后续click流程；但弹窗场景下，mousedown触发后焦点切换、DOM重排可能导致鼠标位置和元素位置偏移，mouseup触发时指针已经不在原a标签上，浏览器会直接触发原生跳转逻辑，mousedown阶段的拦截完全碰不到这个流程。

修复方法 #

• 事件处理函数显式声明event形参，永远不要依赖全局window.event
• 将监听事件从mousedown改为click，直接在跳转触发的事件节点做拦截
• 动态渲染的弹窗内容，需要在弹窗DOM挂载完成后再执行绑定，或者直接在稳定的父容器上做事件代理，避免漏绑元素

修复后的核心代码（事件代理版，无需重复绑定动态插入的链接）：

document.addEventListener('click', function(e) {
  const link = e.target.closest('a');
  if (!link) return;
  const href = link.href;
  if (href.startsWith('http://')) {
    e.preventDefault();
    // 自定义拦截逻辑，比如弹安全提示、自动转HTTPS等
  }
}, false);

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