JavaScript中如何判断事件是否已被其他目标处理或存在默认事件？

原生JavaScript没有提供能100%准确判断元素是否绑定了点击监听器、是否存在默认点击行为的通用公开API，因此无法实现你设想的完美版本isNotHandledOtherwise函数，但可以通过以下两种可落地的方案覆盖绝大多数业务场景：

方案1：显式标记可交互元素（推荐） #

这种方案可控性最高，不会出现误判，适合所有可维护性要求高的项目：

• 给所有有独立点击逻辑、或自带默认点击行为的元素统一添加自定义属性标记，比如data-no-card-click
• 在卡片点击处理函数中，遍历点击目标到卡片容器之间的所有元素，只要存在带标记的元素就终止转发逻辑

代码示例：

<div class="card">
  <h3 class="title">
    <a href="/some/path" data-no-card-click>Title</a>
  </h3>
  <button data-no-card-click>Button</button>
  <input data-no-card-click />
  <a href="/some/other/path" data-no-card-click>Link</a>
  <!-- 自定义可点击元素也加对应标记 -->
  <div class="custom-clickable" data-no-card-click>自定义可点击区域</div>
</div>

function clickHandler(event) {
  let el = event.target;
  const card = event.currentTarget;
  // 遍历点击路径，检查是否存在可交互标记
  while(el !== card) {
    if(el.hasAttribute('data-no-card-click')) return;
    el = el.parentElement;
  }
  // 没有可交互元素，执行转发
  card.querySelector('.title a').click();
}

document.querySelectorAll('.card').forEach(el => {
  el.addEventListener('click', clickHandler);
})

方案2：动态判断默认行为+已处理状态 #

这种方案不需要额外加标记，适合快速实现简单场景：
结合event.defaultPrevented属性判断事件是否已经被处理，再判断元素是否为自带默认点击行为的类型：

• 如果event.defaultPrevented为true，说明之前的监听器已经调用了preventDefault()，事件已经被处理
• 自带默认点击行为的元素包括带href的a标签、按钮、表单控件、可编辑元素、带role="button"的自定义元素等

代码示例：

function isNotHandledOtherwise(event) {
  if(event.defaultPrevented) return false;
  let el = event.target;
  const card = event.currentTarget;
  while(el !== card) {
    // 带href的a标签
    if(el.tagName === 'A' && el.getAttribute('href')) return false;
    // 原生表单/按钮元素
    if(['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(el.tagName)) return false;
    // 可编辑元素
    if(el.isContentEditable) return false;
    // 语义化标记的自定义按钮
    if(el.getAttribute('role') === 'button') return false;
    el = el.parentElement;
  }
  return true;
}

function clickHandler(event) {
  if(isNotHandledOtherwise(event)){
    event.currentTarget.querySelector('.title a').click();
  }
}

如果遇到没有语义化标记的自定义可点击元素，只需要在它的点击监听器中调用event.stopPropagation()或者event.preventDefault()，就可以自动适配这个判断逻辑。

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