如何为JavaScript自定义事件实现preventDefault默认行为阻止功能？

自定义事件默认不会关联“默认动作”，也不支持preventDefault()的检测逻辑，要实现你要的效果，核心是创建可取消的自定义事件，并在触发后检查是否阻止了默认行为。

具体实现步骤： #

• 创建事件时使用CustomEvent而非普通Event，并传入{ cancelable: true }配置，这样监听器调用e.preventDefault()时，会把事件的defaultPrevented属性设为true。
• 在触发事件后，判断event.defaultPrevented的值，若为true则终止后续逻辑。

修改后的完整代码： #

<div class="element">Element opened - Failed to prevent default</div>
<button class="openButton">Open</button>

.element {
  display: none;
}
.element[data-open] {
  display: block;
}

const element = document.querySelector(".element");
const openButton = document.querySelector(".openButton");

function open() {
  // 创建可取消的自定义事件
  const beforeOpenEvent = new CustomEvent("beforeopen", { cancelable: true });
  // 触发事件
  element.dispatchEvent(beforeOpenEvent);
  
  // 检查是否阻止了默认行为，是则终止函数
  if (beforeOpenEvent.defaultPrevented) {
    return;
  }
  
  element.setAttribute("data-open", "");
}

element.addEventListener("beforeopen", (e) => {
  e.preventDefault();
});

openButton.addEventListener("click", () => {
  open();
});

补充思路：自定义取消标记 #

如果你不想用标准的CustomEvent，也可以手动传递一个带取消标记的对象：

function open() {
  const cancelToken = { canceled: false };
  // 触发自定义事件时传递标记对象
  element.dispatchEvent(new CustomEvent("beforeopen", {
    detail: cancelToken
  }));
  
  if (cancelToken.canceled) {
    return;
  }
  
  element.setAttribute("data-open", "");
}

// 监听器中修改标记
element.addEventListener("beforeopen", (e) => {
  e.detail.canceled = true;
});

不过这种方法不符合浏览器事件的标准范式，推荐优先使用第一种方案。

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