从jQuery的click事件中返回false

Question

我像这样设置了点击事件：

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

他们都有一个“return false”

有人能解释一下这是什么意思，以及它是否必要吗？

- Alan2

Answer 1

当你从事件处理程序中返回 false 时，它会阻止该事件的默认操作并停止事件在DOM中的冒泡。也就是说，这相当于执行以下操作：

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

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

至于在您的情况下是否需要它，我猜答案是肯定的，因为您想要在单击后显示对话框而不是导航。如果您在上面放置了单击处理程序的元素没有默认单击操作（例如，单击

通常不会发生任何事情），则不需要返回false，因为没有东西需要取消。

如果您想对单击做出响应，但让默认导航继续，则不要返回false。

进一步阅读：

• event.preventDefault()
• event.stopPropagation()

- nnnnnn

---

如果我将这两个事件编码到对话框函数中，结果会一样吗？ - Alan2

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

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

Answer 2

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

我认为没有W3C规范涉及此问题。所有类似此类的旧JavaScript接口都被称为“DOM 0”，并且大多数未经指定。您可以尝试阅读旧的Netscape 2文档。

实现此效果的现代方法是调用event.preventDefault()，并且这在 DOM 2 Events规范中有所说明。

因此，正确的方式是：

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

- Praveen Kumar Purushothaman

---

你提到了“现代”的方式，但如果它只是相同的话，编写return false并从脚本中节省一些字节不是更好吗 :-) - Alan2

如果是jQuery事件处理程序，您可以确信return false会完成工作。 - nnnnnn

@Gemma，这是由W3C验证并指定的。 :) 因此可以放心使用。但在jQuery中，是的，return false也能达到同样的效果。 :) - Praveen Kumar Purushothaman

Answer 3

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

- kavindra chand

---

这并没有为对话添加任何内容，因为这个完全相同的回应已经在很久以前提供过了。 - Sean Kendle