event.preventDefault() 与 return false 的区别

Question

当我想要在某个事件触发后阻止其他事件处理程序执行时，可以使用以下两种技术之一。在示例中，我将使用jQuery，但这也适用于纯JS：

1. event.preventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2. return false

第二种情况是使用 `return false`，它将取消事件的默认操作并防止事件冒泡。

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法有显著区别吗？

对我来说，return false;比执行一个方法更简单、更短，并且可能更不容易出错。使用方法时，你必须记住正确的大小写、括号等等。

此外，我还必须定义回调函数的第一个参数才能调用该方法。也许，有一些原因可以避免这样做，而应该使用 preventDefault ？哪种方式更好？

- RaYell

---

иҜ·жіЁж„ҸпјҢjQueryдёӯзҡ„preventDefault并дёҚиғҪйҳ»жӯўе…¶д»–еӨ„зҗҶзЁӢеәҸжү§иЎҢгҖӮиҝҷе°ұжҳҜstopImmediatePropagationеӯҳеңЁзҡ„еҺҹеӣ гҖӮ - Crescent Fresh

@CrescentFresh，它确实可以防止其他（后续绑定的）处理程序在触发事件的DOM节点上执行。它只是不会阻止事件传播。 - eyelidlessness

这不是“两种停止事件传播的方法”吗？e.preventDefault(); 防止默认操作，而 e.stopPropagation() 则停止事件传播。请注意，它们并不相同。 - Timo Tijhof

这个问题及其答案是关于jQuery的。如果您在寻找纯JavaScript的答案，请查看event.preventDefault() vs. return false (no jQuery)。 - Oriol

这个回答有一个表格解释了全部内容，链接在 https://dev59.com/SW435IYBdhLWcg3wohpT#5302939。 - Adriano

Answer 1

在jQuery事件处理程序中使用return false实际上相当于在传递的jQuery.Event对象上调用e.preventDefault和e.stopPropagation两个方法。 调用e.preventDefault()将阻止默认事件的发生，e.stopPropagation()将阻止事件冒泡，而return false则同时阻止默认事件和阻止事件冒泡。请注意，这与普通（非jQuery）事件处理程序的行为不同，在其中，特别是return false不会阻止事件冒泡。

来源：John Resig 参考：是否有使用event.preventDefault()来取消href点击的“return false”之外的任何好处？

- karim79

---

在DOM2事件处理程序(addEventListener)中，return false完全没有任何作用（既不能阻止默认行为也不能停止冒泡）；在微软的DOM2-ish事件处理程序(attachEvent)中，它会阻止默认行为但不会阻止冒泡；在DOM0事件处理程序(onclick="return ...")中，如果你在属性中包含return，则它会阻止默认行为但不会阻止冒泡；在jQuery事件处理程序中，它两者都可以做到，因为那是jQuery的特性。详细信息和实时测试 - T.J. Crowder

在这里定义“Propagation”和“Default”会很有帮助。我一直混淆它们。这样理解是否正确？Propagation（传播） = 我的代码（用于父元素的JavaScript事件处理程序）。Default（默认） = 浏览器代码（链接、文本选择等）。 - Bob Stein

"Bubbling" means the formation of bubbles or the movement of gas through a liquid. An example would be when carbon dioxide gas forms bubbles in a carbonated drink. - Govinda Sakhare

+1 表示在非 jQuery 事件处理程序中，return false 不会停止事件传播。例如，<a href="#" onclick="return false">Test</a> 不会阻止事件冒泡。 - Doug S

如果您不知道事件冒泡是什么意思，那么您可能需要阅读并理解整个页面：https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events @GovindaSakhare - Mikko Rantalainen

Answer 2

从我的经验来看，使用event.preventDefault()比使用return false至少有一个明显的优势。假设您正在捕获锚标签上的单击事件，否则如果用户被导航离当前页面将会是一个大问题。如果您的单击处理程序使用return false来防止浏览器导航，那么就有可能解释器不会到达return语句，而浏览器将继续执行锚标签的默认行为。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

使用event.preventDefault()的好处是，你可以将其作为处理程序中的第一行添加，从而保证无论函数的最后一行是否被执行（例如运行时错误），都不会触发锚点的默认行为。请注意保留HTML标签。

$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});

- Jeff Poulton

---

在实施渐进增强时，通常更喜欢相反的行为（我认为这可能是覆盖默认操作的最常见原因）。 - meandmycode

两种方法都是阻止事件的默认行为，只是要看您试图解决什么问题。 - Fabio Martins

Answer 3

这不是一个"JavaScript"问题，而是关于jQuery设计的问题。

jQuery和先前链接引用来自John Resig（在karim79的 message中）似乎是误解事件处理程序如何工作的根源。

事实：返回false的事件处理程序会阻止该事件的默认操作。它并不停止事件传播。事件处理程序始终以这种方式工作，自Netscape Navigator的旧日起就是如此。

返回false的事件处理程序内容属性和事件处理程序IDL属性将阻止该事件处理程序的默认操作。

jQuery中发生的情况与事件处理程序中发生的情况不同。DOM事件侦听器和MSIE“附加”事件完全是另一回事。

更多阅读，请参见[W3C DOM 2 Events文档][1]。

- Garrett

---

@rds说的是："preventDefault不会阻止事件通过DOM进一步传播。要实现这一点，应该使用event.stopPropagation。" - Garrett

一个相关问题的答案声称，在 HTML 5 之前，从事件处理程序返回 false 没有被规范为做任何事情。现在，也许这是对（难以理解的）规范的错误解释，或者尽管它没有被明确规定，但所有浏览器都将 return false 解释为 event.preventDefault()。但我不知道；这足以让我带着怀疑看待。 - Mark Amery

我讨厌在Google搜索JavaScript时，每个搜索结果都是关于jQuery的，+1。 - Alexander Derck

MDN链接是404，因此我将其删除了。https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/More_Event_Handlers#Prevent_Default_Action，而MSDN链接也是错误的，因为它链接到MDN而不是MSDN：（请参见“有关详细信息，请参阅MSDN上的attachEvent”）。 - Garrett

MSDN现在正在重写历史，假装它的历史就是当前Firefox的历史。重写历史对于政府来说并不新鲜，这是一种权力工具，用于感知管理。MSDN多么随意和可笑地用event.returnValue来重写历史。然而，那不是现实。https://lists.w3.org/Archives/Public/www-style/2010Sep/0458.html - Garrett

Answer 4

通常情况下，你应该选择第一个选项(preventDefault())，但你必须知道你所处的上下文和你的目标是什么。

Fuel Your Coding有一篇很棒的文章，讲述了return false;与event.preventDefault()与event.stopPropagation()与event.stopImmediatePropagation()之间的区别。文章链接：https://web.archive.org/web/20160429070956/http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

- JAAulde

---

@VisruthCV 请查看我添加的带有存档版本链接的注释。 - JAAulde

Answer 5

使用jQuery时，当您调用return false时，它会执行以下3个操作：

1. event.preventDefault();（阻止默认行为）
2. event.stopPropagation();（阻止事件冒泡）
3. 在被调用时立即停止回调函数的执行并返回。

有关更多信息和示例，请参见jQuery Events: Stop (Mis)Using Return False。

- James Drinkard

---

如果代码的其他部分正在监听此事件，event.stopPropagation();会取消它们的回调函数吗？ - Fabio Martins

Answer 6

对于一个元素，您可以将许多函数挂接到onClick事件上。如何确保false函数是最后一个被触发的呢？另一方面，preventDefault只会确保阻止元素的默认行为。

- Eldar Djafarov

---

你不需要让最后一个事件处理程序返回false。任何处理程序都可以返回false以防止默认行为。请参见https://myprogrammingnotes.com/preventdefault-cancelbubble-true-return-false-and-returnvalue-false.html。 - peter

Answer 7

我认为

event.preventDefault()

是W3C指定的取消事件的方式。

你可以在W3C规范 事件取消中阅读相关内容。

此外，在某些情况下，你不能使用return false。当在href属性中给出一个JavaScript函数时，如果你返回false，则用户将被重定向到一个带有false字符串的页面。

- rahul

---

在我所遇见的任何浏览器中都没有出现过这种情况。也许你把它混淆成了 <a href="javascript:return false" 或其他类似的东西？ - mplungjan

声称返回 false 的 a 标签会生成一个带有单词 "false" 的文本页面是完全无稽之谈。 - Mark Amery

（减）1；损坏的链接+完全无意义 - Phil

Answer 8

我认为最好的方法是使用event.preventDefault()，因为如果处理程序中引发了异常，则会跳过返回false语句，行为与您想要的相反。

但是，如果您确信代码不会触发任何异常，那么可以选择任何您希望的方法。

如果您仍然想使用返回false，则可以将整个处理程序代码放入try catch块中，如下所示：

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});

- Naga Srinu Kapusetti

Answer 9

主要区别在于return false和event.preventDefault()的不同，其中return false下面的代码将不会执行，在event.preventDefault()的情况下，该语句后面的代码将会执行。

当您编写return false时，它会在幕后为您执行以下操作。

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();

- Abdullah Shoaib

Answer 10

根据我的经验，event.stopPropagation() 主要用于 CSS 特效或动画工作中，例如当您同时在卡片和按钮元素上悬停时，悬停在按钮上会触发卡片和按钮的悬停效果，此时可以使用 event.stopPropagation() 来停止冒泡行为，而 event.preventDefault() 则是用于防止浏览器默认行为。例如，您有一个表单但仅为提交操作定义了点击事件，如果用户通过按下 Enter 提交表单，则浏览器将触发 keypress 事件，而不是您的点击事件，在这种情况下，您应该使用 event.preventDefault() 避免不当行为。我不知道 return false; 是什么意思，抱歉。欲了解更多信息，请访问此链接并尝试操作第33行 https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv。

- Sathish Shajahan