向点击事件监听器添加“返回假”有什么作用?

2020/09/30 06:01 · javascript ·  · 0评论

很多次,我在HTML页面中都看到过这样的链接:

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

return false在那里的作用是什么

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

在任何地方都指定了吗?在w3.org的某些规格中?

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

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

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

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

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

单击“确定”,返回true,然后单击链接。单击“取消”将返回false,并且不遵循链接。如果禁用了javascript,则正常跟随链接。

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

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

真正在做什么“返回假”

返回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>

从JavaScript事件中将false调整为false通常会取消“默认”行为-在链接的情况下,它告诉浏览器不要遵循该链接。

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

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

在JavaScript运行后,返回false将停止遵循超链接。这对于不引人注意的javascript正常降级很有用-例如,您可能有一个缩略图,该缩略图使用javascript打开全尺寸图像的弹出窗口。当关闭javascript或单击鼠标中键(在新选项卡中打开)时,此操作将忽略onClick事件,并通常以全尺寸图像的形式打开图像。

如果未指定return false,则图像将同时启动弹出窗口并正常打开图像。某些人不是使用return false而是将javascript用作href属性,但这意味着禁用javascript时,链接将无效。

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

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

在按钮中,这是没有必要的,因为onclick就是它将执行的全部东西-没有href可以处理和转到。

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

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

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

这样return false可以防止页面被浏览以及窗口不必要地滚动到顶部或底部。

onclick="return false"

我很惊讶,没有人提到onmousedown代替onclick

onclick='return false'

无法捕获浏览器的默认行为,从而导致(有时是不必要的)文本选择发生,mousedown

onmousedown='return false'

做。

换句话说,当我单击按钮时,有时会意外选择其文本,从而改变按钮的外观,这可能是不需要的。这是我们试图在此处防止的默认行为。但是,该mousedown事件是在之前注册的click,因此,如果仅阻止click处理程序内部的行为,则不会影响该mousedown事件引起的不需要的选择因此,文本仍然被选中。但是,防止该mousedown事件的默认设置将起到作用。

另请参阅event.preventDefault()与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为“”,因此它链接回SAME当前页面。因此,该页面实际上只是刷新了,似乎什么也没有发生。

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

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

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

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

使用表格时,我们可以使用“ return false”来防止提交。

function checkForm() {
    // return true to submit, return false to prevent submitting
}
<form onsubmit="return checkForm()">
    ...
</form>
本文地址:http://javascript.askforanswer.com/xiangdianjishijianjiantingqitianjiafanhuijiayoushenmezuoyong.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!