【问题标题】:What's the effect of adding 'return false' to a click event listener?在点击事件监听器中添加“return false”有什么效果?
【发布时间】:2021-01-19 01:21:15
【问题描述】:

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

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

里面的return false有什么作用?

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

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

【问题讨论】:

  • 而 leonel 的例子中的实际问题是,如果当前页面以某种方式向下滚动,它将跳转到顶部而不返回 false;
  • 我的 IntelliJ 抱怨“return false;”带有“外部函数定义”消息

标签: javascript html


【解决方案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 被禁用,则链接将被正常访问。

【讨论】:

  • 正是我想要的,在提交按钮上也很完美! &lt;button type="submit" onclick="return confirm('Do you really want to delete this?');"&gt;Delete&lt;/button&gt;
【解决方案3】:

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

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

【讨论】:

  • onclick="return false" 与从 jQuery click 事件处理程序返回 false 相同。浏览器只会阻止默认处理程序(例如e.preventDefault()),但不会停止传播。见:jsfiddle.net/18yq1783
  • Fwiw,指向博客的链接已损坏 atm。一个archive is here
  • Here's a link 到至少目前有效的博客文章。
  • return false 不是“当你调用它时做那些事情”(return 也不是真正的被“调用”的东西;它不是一个函数)。 return false 只是返回 false。浏览器在调用 click 处理程序并从中获取 false 的返回值时执行这些操作。
【解决方案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 表示不采取默认操作,在&lt;a href&gt; 的情况下是跟随链接。当您向 onclick 返回 false 时,href 将被忽略。

        【讨论】:

          【解决方案10】:
          【解决方案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”时,提交将被取消。基本上是为了对前端做一些检查。

                【讨论】:

                  最近更新 更多