什么时候以及为什么在 JavaScript 中返回 false？

什么时候以及为什么使用 JavaScript 编写 return false？

219000 次浏览
小开

呃... 用布尔函数来表示“不是真的”怎么样？

小开
最佳答案

通常，在事件处理程序(如 onsubmit)中，返回 false 是告诉事件不要实际触发的一种方法。因此，假设在 onsubmit的情况下，这意味着表单没有提交。

小开

当使用 jQuery 的 each函数时，返回 true 或 false 都有意义

小开

它是用来停止 事件的传播。 当两个元素都具有 click 事件处理程序时，您会看到(例如)

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

如果单击内部元素(element2) ，它将在两个元素中都触发一个 click 事件: 1和2。这就是所谓的“事件泡沫”。如果希望仅在 element2中处理事件，则事件处理程序必须返回 false 才能停止事件传播。

另一个例子是 link onclick 处理程序。如果要停止链接窗体的工作。可以添加 onclick 处理程序并返回 false。阻止事件传播到默认处理程序。

小开

我认为一个更好的问题是，为什么在计算返回值的布尔值集合的情况下，不使用 true/假的？我的意思是，你可能有 true/null，true/-1，其他的混合。用 Javascript“ false”值替换，但是为什么要这样做呢？

小开

我猜想您指的是这样一个事实，即您经常必须在事件处理程序中放置一个‘ return false;’语句，即。

<a href="#" onclick="doSomeFunction(); return false;">...

在这种情况下，‘ return false;’将阻止浏览器跳转到当前位置，正如 href = “ #”-所指示的那样，只执行 doSome function ()。当您想要向锚标记添加事件，但又不希望浏览器在每次单击时跳转到每个锚时，这种方法非常有用

小开

当您希望从锚标记触发 javascript 代码时，应该使用 onclick 处理程序而不是 javascript: 伪协议。运行在 onclick 处理程序中的 javascript 代码必须返回标记本身 true 或 false (或者返回一个比赋值为 true 或 false 的表达式)——如果返回 true，那么锚的 HREF 就会像普通链接一样被跟踪。如果返回 false，那么 HREF 将被忽略。这就是为什么“ return false;”通常包含在 onclick 处理程序的代码末尾。

小开

我也是在搜索“ js，什么时候使用‘ return false’之后来到这个页面的; 在其他搜索结果中，我发现了一个更加有用和直接的页面，在 Chris Coyier 的 CSS-Tricks 网站: ‘ return false;’和‘ e.proventDefault () ;’之间的区别上

他的文章的要点是:

函数(){ return false; }

//等于

函数(e){ e.proventDefault () ; e.stop  传播() ; }

不过我还是建议你读一下整篇文章。

更新: 在讨论了使用 return false 的优点之后，我的一个同事指出 return false 也会停止回调执行，正如本文所概述的: JQuery Events: Stop (Mis) Using Return False。

小开

你使用 return false 来阻止某事发生。因此，如果您有一个脚本运行在提交，然后返回 false 将阻止提交工作。

小开

当在函数中调用 return 语句时，此函数的执行将停止。如果指定，则将给定值返回给函数调用方。如果省略表达式，则返回未定义的。

想了解更多，请看 return的 MDN 文档页。

小开

返回 false 只有当你有一些错误的函数(通过一些测试)或者你想要停止一些函数，例如使用返回 false 在结尾“ oncommit”

小开

此外，这个简短而有趣的链接通读 Https://www.w3schools.com/jsref/event_preventdefault.asp

定义及用法

如果事件是可取消的，则 proventDefault ()方法取消该事件，这意味着不会发生属于该事件的默认操作。

例如，在下列情况下，这可能很有用:

Clicking on a "Submit" button, prevent it from submitting a form
Clicking on a link, prevent the link from following the URL

注意: 并非所有事件都是可取消的。请使用可取消属性查看某个事件是否可取消。

注意: proventDefault ()方法不会阻止事件通过 DOM 的进一步传播。可以使用 stop  传播()方法来处理这个问题。

小开

为什么返回虚假的，或者事实上，为什么返回任何东西？

函数中的代码 return(val);将 val的值返回给函数的调用方。或者，引用 MDN 网络文档，它..。

... 结束函数执行并指定返回给函数调用者的值。(来源: < strong > MDN Web Docs: return )

因此，return false;在事件处理程序中非常有用，因为事件处理程序使用这个 will 值来确定进一步的操作。return false;取消通常使用处理程序发生的事件，而 return true;允许发生这些事件。再次引用 MDN 网络文档..。

来自处理程序的返回值确定事件是否被取消。(来源: < strong > MDN Web Docs: DOM OnEvent Handlers )

如果要取消事件，请返回 false; 单独返回 false 是不够的。

您还应该使用 Event.preventDefault();和 Event.stopPropagation();。

Event 接口的 proventDefault ()方法告诉用户代理，如果事件没有得到显式处理，那么它的默认操作就不应该按照正常的方式执行。(来源: MDN 网络文档)

Event 接口的 stop )防止当前事件在捕获和冒泡阶段的进一步传播。(来源: MDN 网络文档)

工作小样

在这个演示中，我们取消了链接的 onclick功能，并防止链接被单击与 return false;，preventDefault()和 stopPropagation()。

全工作 JSBin 演示。

堆栈溢出演示..。

document.getElementById('my-link').addEventListener('click', function(e) {
console.log('Click happened for: ' + e.target.id);
e.preventDefault();
e.stopPropagation();
return false;
});
<a href="https://www.wikipedia.com/" id="my-link" target="_blank">Link</a>


提交答案