JavaScript 'onclick' 事件 'return' 关键字功能

Posted 2023-02-22

【中文标题】JavaScript \'onclick\' 事件 \'return\' 关键字功能

【英文标题】：JavaScript 'onclick' event 'return' keyword functionalityJavaScript 'onclick' 事件 'return' 关键字功能

【发布时间】：2011-12-10 12:37:28

【问题描述】：

我对 javascript 非常陌生，偶然发现了 return 关键字。基本上，这两种说法有什么区别？

<input type="checkbox" onclick="doAlert()" />

对比

<input type="checkbox" onclick="return doAlert();" />

本质上，两者都返回了相同的结果并调用了该函数，但还有更多吗？非常感谢任何帮助:)。谢谢！

【问题讨论】：

既然你说你是 javascript 新手，我强烈建议你学习如何附加事件处理程序，而不是像在这里那样内联定义它们。有 debate 但有 good reasons 为什么你不应该使用内联处理程序。

适合初学者的好资源：MDN JavaScript Guide 和 quirksmode.org - Introduction to event handlers。

可能重复：***.com/questions/128923/…（未标记）

【参考方案1】：

一些 html 元素的 JS 事件在返回 true/false 时表现不同。例如：

<input type='submit' value='Click Me' onSubmit='ValidateForm();'>

...对...

<input type='submit' value='Click Me' onSubmit='return ValidateForm();'>

第二种情况，如果ValidateForm函数返回false，表单不会提交，第一种即使函数返回false，表单仍然会提交。

我认为在这种情况下，您可以看到使用 return 关键字与不使用关键字的区别。

已更新 为简化起见，如果您使用 return 关键字，您会将值传递回调用 onsubmit 的函数。没有它，你只是调用你在事件处理程序中命名的函数并且不返回任何东西。

更新 2021-01-21 此功能也适用于 html 锚点/链接 (a) 上的 onclick 方法：

示例用法：

<a href="#never-used" onclick="alert('click clack'); return false;" > 

点我

【讨论】：

如果ValidateForm在语法onSubmit='return ValidateForm();'中返回0或null或23 而不是true或false怎么办？

@overexchange 测试它，看看会发生什么。 :-)

它适用于所有这些值。 ValidateForm 是否应该返回一些东西？

我不知道实现的细节，但我希望它类似于if (returnValue === false) /* do something here*/ 。所以除非你返回'false'——我认为表单会提交

澄清@overexchange 的问题——在JavaScript 中，当您评估if 或在其他需要布尔值的情况下。将评估该值 (0, null, 23) 以查看它是否“真实”——这在此处进行了深入解释：developer.mozilla.org/en-US/docs/Glossary/Truthy

【参考方案2】：

将return 添加到函数（）中，它会禁用浏览器的默认行为，它会禁用submit 的工作。意味着如果函数返回 false 并且您可以再次将值填充到字段中，它将使您保持在同一页面上。

如果你不将return与function()一起使用，那么submit函数将执行它的工作，它会重定向到下一个指定页面，而不关心返回的结果是真还是假。

【讨论】：

只需在函数调用前添加return不会*不*禁用浏览器的默认行为——这取决于函数调用返回的内容。如果被调用的函数返回一些truthy，则执行默认行为；如果函数返回错误的值，则默认行为被取消。 Y. Shoham 在此答案涵盖之前 7 年接受的答案，而此答案实际上是不正确的。

【参考方案3】：

从函数返回 false，将中止检查的效果。因为将硬编码到 html 属性中的函数的本机（它变成了一些新的本地函数），编写没有单词“return”的 html 只会运行该函数，并丢失它的返回值，就像你写的一样：

function doAlert() 
   if(some_condition)
     return false;
   else
     return true;

function some_local_function() 
   doAlert();

函数some_local_function 不会返回任何值，尽管doAlert 会返回。

当你写“return”时，就像你这样写第二个函数：

function some_local_function() 
   return doAlert();

保留 doAlert 的返回值，无论它是什么。如果为真 - 操作将执行（复选框将被选中） - 否则 - 它将取消。

您可以在此处查看实时示例：http://jsfiddle.net/RaBfM/1/

【讨论】：

请注意，JSFiddle 默认不会识别 HTML 中的 JS 函数，因此如果您自己制作小提琴，则必须设置 JavaScript“加载类型”：***.com/a/14499852/1599699跨度>

（将脚本标签移动到 JS 部分并做到了，它有效：jsfiddle.net/RaBfM/369）