javascript - e.preventDefault() 阻止默认行为，但不返回 false。为什么？

Question

我有以下简单形式:

<form action="" id="myForm">
    Use <code>return false</code> (if not checked,
    <code>e.preventDefault()</code> will be used):
    <input type="checkbox" id="myCheckbox" checked>

    <br/>

    <input type="submit" value="Submit me">
</form>

然后，JavaScript 端:

document.getElementById("myForm").addEventListener("submit", function (e) {
    if (document.getElementById("myCheckbox").checked) {
        return false;    
    }
    e.preventDefault();
});

为什么 return false NOT 阻止默认行为，而 e.preventDefault() 按预期工作？

根据 this answer :

return false is doing 3 separate things when you call it:

1. event.preventDefault();
2. event.stopPropagation();
3. Stops callback execution and returns immediately when called.

因此，event.prevendDefault() 被调用。这是否只发生在 jQuery 回调中？

JSFIDDLE

Answer 1

因为您是通过 addEventListener 附加事件，而不是通过 HTML form 元素本身的 onsubmit 属性，所以您需要设置您的通过使用 returnValue 传递给事件处理程序的事件返回值。这就是您看到 preventDefault 起作用的原因 - 因为它是事件的属性。试试这个:

document.getElementById("myForm").addEventListener("submit", function (e) {
    if (document.getElementById("myCheckbox").checked) {
        e.returnValue = false; // <- Note
    }
    else {
        e.preventDefault();
    }
});

Updated fiddle

不同之处在于，因为未调用return，执行将继续通过该语句，因此您需要相应地修改您的逻辑。因此，我添加了 else block 。