添加'return false'点击事件监听器?

我在HTML页面中见过很多这样的链接:

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

这里return false的作用是什么?

而且,我通常不会在按钮中看到这种情况。

这在任何地方都指定了吗?在w3.org的一些规范中?

495203 次浏览

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

在你的例子中,浏览器不会尝试转到#。

从JavaScript事件中返回false通常会取消“默认”行为——在链接的情况下,它告诉浏览器不要跟踪该链接。

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

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

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

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

在按钮中,这是不必要的,因为onclick是它将执行的所有操作——没有href来处理和前往。

返回false将在javascript运行后停止跟踪超链接。这对于优雅地降级的不引人注目的javascript非常有用——例如,你可以有一个缩略图,使用javascript打开一个全尺寸图像的弹出窗口。当javascript被关闭或图像被中间点击(在一个新的选项卡中打开)时,它会忽略onClick事件,只是正常地以完整尺寸的图像打开图像。

如果没有指定return false,图像将正常启动弹出窗口并打开图像。有些人不使用return false,而是使用javascript作为href属性,但这意味着当javascript被禁用时,链接将什么都不做。

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

我不相信有一个W3C规范。像这样的所有古老的JavaScript接口都被冠以“DOM 0”的绰号,而且大多数都没有具体说明。您可以有幸阅读旧的Netscape 2文档。

实现这种效果的现代方法是调用event.preventDefault(),这在DOM 2事件规范中指定。

下面是一个更健壮的例程,可以取消所有浏览器中的默认行为和事件冒泡:

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

你可以从下面的例子中看出区别:

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

单击“ok”返回true,然后是链接。点击“取消”返回false,并且不遵循链接。如果javascript被禁用,链接是正常的。

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

onclick='return false'

没有捕捉浏览器的默认行为,导致(有时不需要的)文本选择发生mousedown但是

onmousedown='return false'

所做的事。

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

另见event.preventDefault() vs. return false

__abc0到底在做什么?

当你调用它时,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>

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

onclick="return false"

我的html页面上有这个链接:

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

函数setBodyHtml()被定义为:

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

当我点击链接,链接消失,文本显示在浏览器中

.

.

但是如果我从我的链接中删除“false”,点击链接(似乎)什么都没有。为什么呢?

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

在后台,函数setBodyHtml()仍然被执行。它将参数赋值给body.innerHTML。但是由于页面会立即刷新/重新加载,修改后的主体内容可能不会在几毫秒内保持可见,所以我不会看到它。

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

我确实想给这个链接赋值somehref,这样它就会显示为一个链接,作为带下划线的文本。但我不希望点击链接只是有效地重新加载页面。我希望默认的navigation=行为被取消,并且调用我的函数所引起的任何副作用都保持有效。因此,我必须“返回false”。

上面的例子是您在开发过程中可以快速尝试的。对于生产,您更可能在JavaScript中分配一个点击处理程序,并调用preventDefault()。但是对于一个快速的尝试,上面的“return false”就可以了。

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

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

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

然而,这种行为在大多数情况下不太合适,因为我们可能想在发送到服务器之前做一些检查。

因此,当听众收到“错误”时,提交将被取消。基本上,它的目的是在前端做一些检查。