从 jQuery 点击事件返回 false

Posted 2023-02-22

【中文标题】从 jQuery 点击事件返回 false

【英文标题】：return false from jQuery click event

【发布时间】：2012-06-26 09:50:15

【问题描述】：

我有这样设置的点击事件：

$('.dialogLink')
    .click(function () 
        dialog(this);
        return false;
    );

所有的都有一个“return false”

有人可以解释这是做什么的以及是否需要它吗？

【参考方案1】：

当您从事件处理程序返回 false 时，它会阻止该事件的默认操作并阻止事件通过 DOM 冒泡。也就是说，它相当于这样做：

$('.dialogLink')
   .click(function (event) 
       dialog(this);
       event.preventDefault();
       event.stopPropagation();
);

如果'.dialogLink' 是<a> 元素，则其默认单击操作是导航到href。从点击处理程序返回 false 可以防止这种情况发生。

至于您的情况是否需要它，我猜答案是肯定的，因为您希望显示一个对话框以响应点击而不是导航。如果您放置了点击处理程序的元素在点击时没有默认操作（例如，当您单击 div 时通常没有任何反应），那么您不需要返回 false，因为没有什么可以取消。

如果你想对点击做一些事情，但让默认导航继续，那么不要返回 false。

进一步阅读：

event.preventDefault() event.stopPropagation()

【讨论】：

如果我将这两个事件编码到对话函数中会不会一样？

这两行不是事件，它们是对event 对象方法的调用，您会注意到我已将其作为参数添加到函数中。 jQuery 将该参数设置为与发生的任何事件关联的event 对象。如果您将event 对象传递给dialog() 函数，那么它可以调用这些方法，但我认为如果您直接在我展示的地方进行操作，它更易于维护。话虽如此，我还是建议您坚持使用已有的return false：它更短。

作为一个刚刚遇到这个问题并花了一点时间才意识到发生了什么的人，我认为调用 return false 并不像说 preventDefault 和 stopPropagation 那样清楚。

【参考方案2】：

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

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

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

所以正确的方法是：

$('.dialogLink')
   .click(function (e) 
       dialog(this);
       e.preventDefault();
       e.stopPropagation(); // Stop bubbling up
);

【讨论】：

你提到了“现代”的方式，但如果它是一样的，代码返回 false 并从脚本中保存一些字节不是更好:-)

如果它是一个 jQuery 事件处理程序，您可以确定 return false 会完成这项工作。

@Gemma，这是有效的，由 W3C 指定。 :) 所以使用起来很安全。但是在 jQuery 中，是的，return false 做同样的工作。 :)

【参考方案3】：

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

【讨论】：

这并没有给对话增加任何内容，因为这个确切的回应，逐字逐句，已经在过去的距离提供了。