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不不阻止默认行为,而e.preventDefault()像预想的那样的作品？

根据这个答案:

return false 当你打电话时它正在做三件事:

1. event.preventDefault();
2. event.stopPropagation();
3. 停止回调执行并在调用时立即返回.

所以,event.prevendDefault()被称为.这只发生在jQuery回调中吗？

的jsfiddle

Answer 1

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

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

更新了小提琴

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