在WordPress古腾堡编辑器中点击更新时如何使用e.preventDefault()？

可能的原因及对应解决方案 #

1. 事件触发顺序冲突
   如果页面中原本就给这个按钮绑定了其他点击事件，且这些事件在你的处理函数之前执行，e.preventDefault()只会阻止当前事件的默认行为，无法中断已经启动的提交流程。这时需要加上e.stopImmediatePropagation()来阻止后续所有同元素的事件处理函数执行：

$(document).on('click', '#editor .editor-post-publish-button', function (e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    // 执行错误检查逻辑
    const hasErrors = true; // 替换成你的实际错误检查结果
    if (hasErrors) {
        alert('帖子存在错误，无法更新');
        return false;
    }

    // 无错误时，可手动触发原提交逻辑（如果需要）
    // 比如移除当前事件监听后再触发点击
    // $(this).off('click', arguments.callee).trigger('click');
});

2. 按钮属于表单提交按钮
   如果按钮是<button type="submit">且嵌套在<form>标签内，单纯阻止按钮的点击默认行为可能不够，因为表单的submit事件会独立触发。这种情况下直接监听表单的提交事件更可靠：

$(document).on('submit', '#editor form', function (e) {
    // 执行错误检查
    const hasErrors = true;
    if (hasErrors) {
        e.preventDefault();
        alert('帖子存在错误，无法更新');
    }
});

3. 原提交逻辑通过非默认行为触发
   如果帖子更新是通过AJAX或者自定义JS逻辑触发的，而非表单默认提交，e.preventDefault()无法阻止这种自定义逻辑。这时需要找到原提交的函数，在错误检查不通过时跳过执行。比如原逻辑可能是按钮点击后调用了publishPost()，你需要在处理函数中先做检查，只有无错误时才调用该函数。

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