将“return false”添加到click事件侦听器的效果是什么？

Question

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

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

return false在那里有什么影响？

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

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

Answer 1

事件处理程序的返回值确定是否也应该发生默认浏览器行为。在单击链接的情况下，这将在链接之后，但在表单提交处理程序中最明显的区别是，如果用户输入信息时出错，您可以取消表单提交。

我不相信有W3C规范。像这样的所有古老的JavaScript接口都被赋予了昵称“DOM 0”，并且大部分未指定。阅读旧的Netscape 2文档可能会有运气。

实现此效果的现代方法是致电event.preventDefault()，这在the DOM 2 Events specification中指定。

Answer 2

您可以通过以下示例看到差异：

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

单击“Okay”返回true，然后按下链接。单击“取消”将返回false并且不会跟随该链接。如果禁用了javascript，则会正常关注链接。

Answer 3

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

// 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);
}

Answer 4

什么 ＆＃34;返回false＆＃34; 真的要做？

return false实际上是在你调用它时做了三件非常独立的事情：

1. event.preventDefault（）;
2. event.stopPropagation（）;
3. 停止回调执行并在调用时立即返回。

有关详细信息，请参阅jquery-events-stop-misusing-return-false。

例如：

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

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

Answer 5

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

Answer 6

我认为这会导致标准事件不发生。

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

Answer 7

返回false将在javascript运行后停止跟踪超链接。这对于优雅降级的不显眼的javascript非常有用 - 例如，您可以使用缩略图来使用javascript打开全尺寸图像的弹出窗口。当关闭javascript或中间单击图像（在新选项卡中打开）时，这将忽略onClick事件，并且通常只将图像打开为完整大小的图像。

如果未指定return false，则图像将启动弹出窗口并正常打开图像。有些人而不是使用return false使用javascript作为href属性，但这意味着当禁用javascript时，链接将不执行任何操作。

Answer 8

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

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

在按钮中，没有必要，因为onclick就是它将要执行的全部内容 - 没有href可以处理并转到。

Answer 9

返回false表示不采取默认操作，如果<a href>是跟随链接。当您向onclick返回false时，将忽略href。

Answer 10

浏览器黑客攻击： http://jszen.blogspot.com/2007/03/return-false-to-prevent-jumping.html

Answer 11

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

Answer 12

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

onclick='return false'

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

onmousedown='return false'

确实

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

另见event.preventDefault() vs. return false

Answer 13

return false阻止页面被导航，并且不必要地将窗口滚动到顶部或底部。

onclick="return false"

Answer 14

我的HTML页面上有此链接：

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

函数setBodyHtml（）定义为：

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

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

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

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

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

此示例说明了为什么有时有时会使用“ return false”。

我确实希望将SOME href分配给该链接，以便它显示为链接，并带有下划线的文本。但我不希望单击链接来有效地重新加载页面。我希望取消默认的navigation = behavior，并通过调用我的函数使之生效并保持有效而产生任何副作用。因此，我必须“返回假”。

以上示例是您在开发过程中可以快速尝试的示例。对于生产而言，您更有可能在JavaScript中分配一个点击处理程序，然后调用preventDefault（）。但是，为了快速尝试，上面的“ return false”可以解决问题。

Answer 15

使用表格时，我们可以使用'return false'防止提交。

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>

Answer 16

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

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

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