在前端开发中，我们经常会通过 addEventListener 方法来监听用户操作，然后执行相应的逻辑。比如，在表单提交时，我们可以用以下代码来阻止表单的默认行为：
document.getElementById('my-form').addEventListener('submit', function(event) {
event.preventDefault();
});这段代码使用了 preventDefault() 方法来阻止了表单的默认行为，即防止表单进行真正的提交操作。但是有些人可能会尝试用 return false 来达到同样的效果，代码如下：
document.getElementById('my-form').addEventListener('submit', function() {
return false;
});然而，这种方式并不能达到预期的效果，表单仍然会被提交。原因在于 return false 并不能完全替代 preventDefault()。
事件处理函数的返回值
在 JavaScript 中，事件处理函数的返回值决定了该事件是否继续向上传播。如果事件处理函数返回 true，则表示事件继续向上传播，如果返回 false，则表示事件被取消，不再继续向上传播。但是，这种规则只适用于捕获和冒泡阶段，对于默认行为来说，它并没有什么作用。
默认行为
在 HTML 中，很多元素都有默认行为，比如表单元素的默认行为就是提交表单。当我们监听表单的 submit 事件时，实际上已经错过了阻止默认行为的机会。因为在事件处理函数被调用之前，表单的默认行为已经被触发了。
阻止默认行为
那么，如何阻止表单的默认行为呢？有两种常见的方式：
使用
preventDefault()方法：document.getElementById('my-form').addEventListener('submit', function(event) { event.preventDefault(); });返回
false并且在事件处理函数中添加一些其他逻辑：document.getElementById('my-form').addEventListener('submit', function() { // 表单提交前执行其他逻辑 console.log('before submit...'); // 返回 false 阻止默认行为 return false; });
第二种方式需要注意的是，在事件处理函数中添加其他逻辑时，需要确保这些逻辑执行完毕后再返回 false，否则表单可能会在添加的逻辑执行完毕之前就被提交了。
示例代码
以下是一个完整的示例代码，展示了如何使用 preventDefault() 和 return false 来阻止表单的默认行为：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
------
----- -------------
------ ----------- --------------- ----------------------
------ --------------- --------------- ---------------------
------- -------------------------
-------
--------
-- -- ---------------- --------
------------------------------------------------------------- --------------- -
-----------------------
----------------- ---------------
---
-- -- ------ ----- --------
------------------------------------------------------------- ---------- -
------------------- ------------
------ ------
---
---------
-------
-------总结
在前端开发中，阻止表单的默认行为是一个常见的需求。虽然 return false 看起来很像是一种阻止默认行为的方式，但实际上它并不能完全替代 preventDefault() 方法。当我们需要阻止表单提交时，最好使用 preventDefault() 方法，并确保在事件处理函数
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27427