e.preventDefault() 阻止默认行为，但不返回 false。为啥？

Posted 2023-02-22

【中文标题】e.preventDefault() 阻止默认行为，但不返回 false。为啥？

【英文标题】：e.preventDefault() prevents the default behavior, but return false not. Why?e.preventDefault() 阻止默认行为，但不返回 false。为什么？

【发布时间】：2014-08-01 02:28:09

【问题描述】：

我有以下简单的形式：

<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() 按预期工作？

根据this answer：

return false 在你调用它时正在做 3 件不同的事情：

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

所以，event.prevendDefault() 被调用。这是否仅在 jQuery 回调中发生？

JSFIDDLE

【问题讨论】：

仅在 jQuery 中，是的，但在 vanilla JS 中没有。

@Teemu 这也是我的猜测。我一直认为return false是由浏览器处理的，而不是由jQuery处理的。

您也可以阅读您指定的问题的已接受答案。

【参考方案1】：

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

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

Updated fiddle

不同的是，因为return没有被调用，执行将继续通过该语句，所以你需要相应地修改你的逻辑。因此，我添加了else 块。

【讨论】：

你的意思是onsubmit属性而不是onclick，对吧？

@IonicãBizãu 是的，谢谢！早上太早了:)

罗马尼亚也是早晨。 :-) 你可以简单地做：return e.returnValue = false; 看起来好多了。 ;-) 你能添加一些文档参考吗？为什么返回 false 到 addEventListener 不会阻止默认行为，而 onsubmit='return false' 会这样做？

老实说，我不知道使用 on* 事件处理程序和 addEventListener 之间存在区别。

returnValue 是什么东西？ Afaik returnValue 属于遗留的 IE 事件处理模型，完全是现代浏览器中的自定义属性？我最近错过了什么吗？