在点击事件监听器中添加“return false”有啥效果？

Posted 2023-03-05

【中文标题】在点击事件监听器中添加“return false”有啥效果？

【英文标题】：What's the effect of adding 'return false' to a click event listener?在点击事件监听器中添加“return false”有什么效果？

【发布时间】：2010-09-12 20:05:15

【问题描述】：

很多时候我在 html 页面中看到过这样的链接：

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

里面的return false有什么作用？

另外，我通常不会在按钮中看到它。

这是在任何地方指定的吗？在 w3.org 的某些规范中？

【问题讨论】：

而 leonel 的例子中的实际问题是，如果当前页面以某种方式向下滚动，它将跳转到顶部而不返回 false；

我的 IntelliJ 抱怨“return false;”带有“外部函数定义”消息

【参考方案1】：

事件处理程序的返回值决定了默认浏览器行为是否也应该发生。在点击链接的情况下，这将是跟随链接，但差异在表单提交处理程序中最为明显，如果用户输入信息错误，您可以取消表单提交。

我认为没有 W3C 规范。像这样的所有古老的 javascript 接口都被赋予了“DOM 0”的绰号，并且大多未指定。阅读旧的 Netscape 2 文档可能会有一些运气。

实现这种效果的现代方式是调用event.preventDefault()，这在the DOM 2 Events specification中指定。

【讨论】：

event.preventDefault ? event.preventDefault() : event.returnValue = false; 也可以在 IE 中使用

除 Chrome 之外的所有浏览器都使用 return false 方法，但我需要 event.preventDefault 用于 Chrome。

Chrome 现在可以使用return false 方法。它停止跟踪 img 元素的 onclick 事件中的链接。

在普通的 JS 表单中，返回 false 的提交处理程序不起作用（至少在 Chrome 中），所以我使用 e.preventDefault()。根据@ 2astalavista 上面的评论 e.preventDefault 在 IE 中失败，所以使用他的方法： event.preventDefault ？ event.preventDefault() : event.returnValue = false;

“我不相信有一个 W3C 规范”Actually, there is（见第 5 步 -> 否则）

【参考方案2】：

您可以通过以下示例看到不同之处：

<a href="http://www.google.co.uk/" onclick="return (confirm('Follow this link?'))">Google</a>

点击“Okay”返回true，链接被点击。单击“取消”会返回 false 并且不会跟随链接。如果 javascript 被禁用，则链接将被正常访问。

【讨论】：

正是我想要的，在提交按钮上也很完美！ <button type="submit" onclick="return confirm('Do you really want to delete this?');">Delete</button>

【参考方案3】：

“返回 false” 真的在做什么？

当你调用它时，return false 实际上是在做三件非常不同的事情：

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

更多信息请参见jquery-events-stop-misusing-return-false。

例如：

点击此链接时，返回 false 将取消浏览器的默认行为。

<a href='#' onclick='someFunc(3.1415926); return false;'>Click here !</a>

【讨论】：

onclick="return false" 不与从 jQuery click 事件处理程序返回 false 相同。浏览器只会阻止默认处理程序（例如e.preventDefault()），但不会停止传播。见：jsfiddle.net/18yq1783

Fwiw，指向博客的链接已损坏 atm。一个archive is here。

Here's a link 到至少目前有效的博客文章。

【参考方案4】：

这是一个更强大的例程来取消所有浏览器中的默认行为和事件冒泡：

// Prevents event bubble up or any usage after this is called.
eventCancel = function (e)

    if (!e)
        if (window.event) e = window.event;
        else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;

如何在事件处理程序中使用它的示例：

// Handles the click event for each tab
Tabstrip.tabstripLinkElement_click = function (evt, context) 

    // Find the tabStrip element (we know it's the parent element of this link)
    var tabstripElement = this.parentNode;
    Tabstrip.showTabByLink(tabstripElement, this);
    return eventCancel(evt);

【讨论】：

垫片很好，但与return false;相比有什么实际优势？ kamesh's answer 稍微处理了这个问题，但是由于您的 shim 有可能会做一个或另一个，这些单独的结果将如何使 tabstripLinkElement_click 在浏览器之间更改操作？如果没有操作上的差异，为什么（在实践中）打扰（即使理论上这是正确的做法）？谢谢，还有 AIA 的僵尸回答问题。

第一个代码块有一个尾随else。可怕的编码风格。添加一些花括号，这样就不会模棱两可了。

@DonaldDuck 你确定那个空格吗？如果我尝试if (false) if (true) console.log('true'); else console.log('false1');，我会得到undefined，而不是false1。如果我添加另一行：if (false) if (true) console.log('true'); else console.log('false1'); else console.log('false2'); 我得到false2。也就是else return中的else我认为属于if (window.event)。

【参考方案5】：

从 JavaScript 事件中重新调整 false 通常会取消“默认”行为 - 在链接的情况下，它会告诉浏览器不要跟随链接。

【讨论】：

“通常”？所以并非总是如此？

【参考方案6】：

我相信它会导致标准事件不发生。

在您的示例中，浏览器不会尝试转到#。

【参考方案7】：

返回 false 将在 javascript 运行后停止跟踪超链接。这对于优雅降级的不显眼的 javascript 很有用 - 例如，您可以有一个缩略图图像，它使用 javascript 打开全尺寸图像的弹出窗口。当 javascript 被关闭或图像被中键点击（在新标签页中打开）时，这会忽略 onClick 事件并正常打开图像作为全尺寸图像。

如果没有指定return false，图片会同时启动弹窗和正常打开图片。有些人不使用 return false 而是使用 javascript 作为 href 属性，但这意味着当 javascript 被禁用时，链接将什么也不做。

【参考方案8】：

在 onclick 事件中使用 return false 会阻止浏览器处理执行堆栈的其余部分，包括跟踪 href 属性中的链接。

换句话说，添加 return false 会使 href 停止工作。在您的示例中，这正是您想要的。

在按钮中，这不是必需的，因为它只会执行 onclick —— 没有要处理和转到的 href。

【参考方案9】：

return false 表示不采取默认操作，在<a href> 的情况下是跟随链接。当您向 onclick 返回 false 时，href 将被忽略。

【参考方案10】：

浏览器破解： http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

【参考方案11】：

返回 false 将阻止导航。否则，该位置将成为 someFunc 的返回值

【讨论】：

不，该位置将成为 href 属性的内容

位置只有在href="javascript:someFunc()"的情况下才会成为someFunc的返回值，对于事件处理程序则不是这样。

【参考方案12】：

return false 可防止页面被导航以及将窗口不必要地滚动到顶部或底部。

onclick="return false"

【参考方案13】：

我很惊讶没有人提到onmousedown 而不是onclick。

onclick='return false'

没有捕捉到浏览器的默认行为导致（有时不需要）为mousedown 选择文本，但是

onmousedown='return false'

会。

换句话说，当我点击一个按钮时，它的文本有时会被意外选中，从而改变按钮的外观，这可能是不需要的。这是我们在这里试图阻止的默认行为。但是，mousedown 事件是在click 之前注册的，因此如果您只在click 处理程序中阻止该行为，它不会影响由mousedown 事件引起的不需要的选择。所以文本仍然被选中。但是，防止 mousedown 事件的默认值将完成这项工作。

另见event.preventDefault() vs. return false

【讨论】：

@FrederikKrautwald 你是对的，它很神秘，我应该说“选择”而不是“标记”。我试着把它写得更清楚，希望它更有意义。

【参考方案14】：

我的 HTML 页面上有这个链接：

<a href = "" 
onclick = "setBodyHtml ('new content'); return false; "
> click here </a>

函数setBodyHtml()定义为：

function setBodyHtml (s)
 document.body.innerHTML = s;

当我点击链接时，链接消失，浏览器中显示的文本 更改为“新内容”。

但是，如果我从链接中删除“假”，则单击该链接（似乎）没有任何作用。这是为什么呢？

这是因为如果我不返回 false，则单击链接并显示其目标页面的默认行为不会被取消。但是，这里超链接的href是“”，所以它链接回相同的当前页面。所以页面实际上只是刷新了，似乎什么也没发生。

在后台，函数 setBodyHtml() 仍然会被执行。它将其参数分配给 body.innerHTML。但是由于页面会立即刷新/重新加载，因此修改后的正文内容可能不会保持可见超过几毫秒，所以我不会看到它。

这个例子说明了为什么有时使用“return false”是有用的。

我确实想为链接分配一些 href，以便它显示为链接，显示为带下划线的文本。但我不希望点击链接有效地重新加载页面。我希望取消默认的 navigation=behavior 以及调用我的函数引起的任何副作用并保持有效。因此我必须“返回 false”。

上面的示例是您在开发过程中可以快速尝试的内容。对于生产，您更有可能在 JavaScript 中分配一个点击处理程序并调用 preventDefault() 代替。但是为了快速尝试一下，上面的“return false”可以解决问题。

【参考方案15】：

在使用表单时，我们可以使用'return false'来阻止提交。

function checkForm() 
    // return true to submit, return false to prevent submitting

<form onsubmit="return checkForm()">
    ...
</form>

【参考方案16】：

默认情况下，当您单击按钮时，无论您输入什么值，表单都会发送到服务器。

但是，这种行为在大多数情况下不太合适，因为我们可能希望在将其发送到服务器之前进行一些检查。

因此，当侦听器收到“false”时，提交将被取消。基本上是为了对前端做一些检查。