如何控制全局click监听器不在表单提交、链接跳转场景下触发？

• 对event.preventDefault()的作用认知偏差：该方法的唯一功能是取消浏览器对事件的默认关联行为（比如点击链接跳转、点击提交按钮触发表单提交），完全不会阻断同事件的传播流程，也不会阻止其他同事件监听器的触发。事件对象上的defaultPrevented属性仅用于标记当前事件的默认行为是否被取消，本身没有任何终止监听器执行的能力。
• 选择器大小写匹配错误：查找表单提交按钮的选择器写为[type=Submit]，但HTML DOM中按钮的type属性值为全小写的submit，且querySelector的属性选择器默认大小写敏感——这行代码根本匹配不到任何真实的提交按钮，等于你给提交按钮绑定的捕获阶段监听器从未生效，自然不会在点击时给事件对象设置defaultPrevented = true。
• 缺失链接元素的处理逻辑：全程没有给页面上的<a>链接元素绑定对应的点击监听器，点击链接时自然没有调用event.preventDefault()，事件对象的defaultPrevented始终为false，全局监听器必然会正常执行。
• beforeunload事件的逻辑关联完全无效：beforeunload仅在页面即将卸载、触发导航跳转时才会执行，此时之前的点击事件对象早已走完完整生命周期被销毁，在这个事件里调用preventDefault既无法回写之前的点击事件状态，也不能反向影响已经执行过的全局监听器逻辑，和你的控制目标没有任何关联。另外你目前的逻辑已经通过preventDefault取消了链接、提交按钮的默认跳转行为，如果没有手动实现后续的导航/提交流程，页面根本不会触发导航，beforeunload本身也永远不会被执行。

方案1：修正原有基于defaultPrevented的判断逻辑 #

核心是保证执行顺序：在全局监听器触发前，让需要跳过全局逻辑的元素（链接、提交按钮）提前在事件对象上标记状态，让全局监听器识别后终止执行。
修正点：

• 把表单提交按钮的选择器修正为大小写匹配的[type=submit]
• 给所有链接元素补充同模式的点击监听器
• 保持全局监听器的冒泡模式绑定，让它的执行时机晚于子元素上绑定的捕获模式监听器

修正后的代码示例：

// 全局普通点击监听器（冒泡模式，晚于子元素捕获阶段的标记逻辑执行）
document.body.addEventListener('click', function(event) {
  // 遇到已被标记的特殊点击，直接终止执行
  if (event.defaultPrevented) return;
  console.log('普通点击触发');
})

// 给所有链接绑定捕获阶段监听器，提前标记事件状态
Array.from(document.querySelectorAll('a')).forEach(link => {
  link.addEventListener('click', function(event) {
    event.preventDefault(); // 取消链接默认跳转
    console.log('链接跳转类点击触发');
    // 如需保留跳转逻辑，在此处手动实现导航
  }, true);
})

// 给所有表单提交按钮绑定捕获阶段监听器，提前标记事件状态
Array.from(document.querySelectorAll('form')).forEach(formEl => {
  const submitBtn = formEl.querySelector('[type=submit]');
  submitBtn?.addEventListener('click', function(event) {
    event.preventDefault(); // 取消表单默认提交
    console.log('表单提交类点击触发');
    // 如需保留提交逻辑，在此处手动实现数据提交
  }, true);
})

方案2：全局监听器内直接判断事件目标（推荐） #

这种方式不需要给每个链接、提交按钮单独绑定监听器，从根源上避开事件执行顺序的问题，哪怕页面后续动态新增链接、提交按钮元素，也能正常识别，不需要重复绑定：

document.body.addEventListener('click', function(event) {
  // 通过closest方法向上匹配点击的元素是否属于特殊点击类型
  const isLinkClick = event.target.closest('a');
  const isSubmitClick = event.target.closest('button[type="submit"], input[type="submit"]');

  // 特殊类型点击直接终止全局逻辑
  if (isLinkClick) {
    console.log('链接跳转类点击触发');
    // 如需保留跳转逻辑，在此处实现
    return;
  }
  if (isSubmitClick) {
    console.log('表单提交类点击触发');
    // 如需保留提交逻辑，在此处实现
    return;
  }

  console.log('普通点击触发');
})

注意：如果你的业务逻辑需要保留链接跳转、表单提交的默认行为（也就是不调用preventDefault），直接用这种方案即可，完全不需要依赖defaultPrevented的判断。

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