3154

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

1.event.preventDefault()

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

2.return false

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

这两种停止事件传播的方法之间有什么显着区别吗？

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

另外，我必须在回调中定义第一个参数才能调用该方法。也许，有一些原因我应该避免这样做并改用它preventDefault？有什么更好的方法？

4

14 回答 14

2933

return false从jQuery 事件处理程序e.preventDefault中调用和调用e.stopPropagation传递的jQuery.Event 对象实际上是相同 的。

e.preventDefault()将防止默认事件发生，e.stopPropagation()将防止事件冒泡，return false并将两者兼而有之。请注意，此行为与普通（非 jQuery）事件处理程序不同，其中值得注意的是，return false不会阻止事件冒泡。

资料来源：约翰·雷西格

使用 event.preventDefault() 而不是“return false”来取消href点击有什么好处？

于 2009-08-31T12:05:19.110 回答
450

根据我的经验，使用 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() 的好处是您可以将其添加为处理程序的第一行，从而保证锚的默认行为不会触发，无论是否未到达函数的最后一行（例如运行时错误）。

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

  // custom handling here

  // oops...runtime error, but at least the user isn't navigated away.
});
于 2011-01-22T22:37:09.570 回答
111

正如你所说的，这不是一个“JavaScript”问题。这是一个关于 jQuery 设计的问题。

jQuery 和之前来自John Resig的引用（在karim79 的 消息中）似乎是对事件处理程序一般工作方式的误解的根源。

事实：返回 false 的事件处理程序会阻止该事件的默认操作。它不会停止事件传播。自 Netscape Navigator 的旧时代以来，事件处理程序一直以这种方式工作。

MDN的文档解释return false了事件处理程序的工作原理

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

如需进一步阅读，请参阅MSDN 上的 attachEvent和W3C DOM 2 Events 文档。

于 2010-06-20T21:31:29.447 回答
70

通常，您的第一个选项 ( preventDefault()) 是可以选择的，但您必须知道您所处的环境以及您的目标是什么。

Fuel Your Coding有一篇关于return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation()的好文章。

于 2011-04-09T18:32:33.127 回答
60

使用 jQueryreturn false时，调用它时会做 3 件不同的事情：

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回调执行并在调用时立即返回。

有关更多信息和示例，请参阅jQuery 事件：使用 Return False 停止（错误） 。

于 2013-02-19T15:54:37.647 回答
46

onClick您可以在一个元素的事件上挂起很多功能。你怎么能确定那false个人会是最后一个被解雇的人？preventDefault另一方面，肯定只会阻止元素的默认行为。

于 2009-08-31T12:02:31.520 回答
21

我认为

event.preventDefault()

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

您可以在 W3C 规范中阅读有关Event cancelation的内容。

您也不能在每种情况下都使用 return false 。在 href 属性中提供 javascript 函数时，如果您返回 false，则用户将被重定向到写入 false 字符串的页面。

于 2009-08-31T12:04:24.043 回答
18

我认为最好的方法是使用event.preventDefault()，因为如果在处理程序中引发了一些异常，那么false将跳过 return 语句，并且行为将与您想要的相反。

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

如果您仍然想使用 return false，那么您可以将整个处理程序代码放在 try catch 块中，如下所示：

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
于 2013-03-09T19:27:34.057 回答
3

return false和之间的主要区别在于event.preventDefault()您的下面的代码return false将不会被执行，event.preventDefault()以防您的代码将在此语句之后执行。

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

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
于 2018-02-09T08:14:22.413 回答
3

防止违约

在事件流的任何阶段调用 preventDefault() 都会取消事件，这意味着实现通常作为事件结果而采取的任何默认操作都不会发生。您可以使用事件。

返回假

在回调中返回 false 可防止默认行为。例如，在提交事件中，它不提交表单。return false 也停止冒泡，因此元素的父级不会知道事件发生。return false 相当于event.preventDefault() + event.stopPropagation()

于 2021-01-02T11:13:52.420 回答
2

e.preventDefault();

它只是停止元素的默认操作。

实例示例：-

防止超链接跟随 URL，防止提交按钮提交表单。当您有许多事件处理程序并且您只想防止默认事件发生，并且多次发生时，我们需要在函数（）的顶部使用。

原因：-

使用的原因e.preventDefault();是在我们的代码中，如果代码出现问题，那么它将允许执行链接或表单以提交或允许执行或允许您需要执行的任何操作。& 链接或提交按钮将被提交并且仍然允许事件的进一步传播。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <a href="https://www.google.com" onclick="doSomethingElse()">Preventsss page from redirect</a>
      <script type="text/javascript">
         function doSomethingElse(){
           console.log("This is Test...");
         }
         $("a").click(function(e){
          e.preventDefault(); 
         });
      </script>
   </body>
</html>

返回假；

它只是停止函数（）的执行。

" return false;" 将结束整个流程的执行。

原因：-

使用return false的原因；是您不想再在严格模式下执行该功能。

<!DOCTYPE html>
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <a href="#" onclick="returnFalse();">Blah</a>
      <script type="text/javascript">
         function returnFalse(){
         console.log("returns false without location redirection....")
             return false;
             location.href = "http://www.google.com/";
         
         }
      </script>
   </body>
</html>

于 2018-04-27T06:55:06.303 回答
2

基本上，通过这种方式你可以组合事物，因为 jQuery 是一个主要关注 HTML 元素的框架，你基本上可以防止默认值，但同时，你会停止传播以冒泡。

所以我们可以简单地说，return false injQuery等于：

返回 false 是 e.preventDefault AND e.stopPropagation

但也不要忘记它都在 jQuery 或 DOM 相关函数中，当您在元素上运行它时，基本上，它会阻止一切触发，包括默认行为和事件传播。

基本上在开始使用之前return false;，先了解什么e.preventDefault();和e.stopPropagation();做什么，然后如果你认为你同时需要两者，那么就简单地使用它。

所以基本上下面的代码：

$('div').click(function () {
  return false;
});

等于此代码：

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
于 2018-07-18T11:07:57.550 回答
2

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

于 2019-05-14T05:09:45.153 回答
1

根据我的经验，我认为总是更好地使用

event.preventDefault()

实际上是在我们需要时停止或阻止提交事件，而不是return false event.preventDefault()正常工作。

于 2014-09-29T11:28:08.497 回答