event.preventDefault（）与返回false

2959

当我想阻止其他事件处理程序在触发某个事件后执行时，可以使用两种技术之一。我将在示例中使用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改为使用它？有什么更好的方法？

javascript  jquery  event-handling  dom-events  event-propagation 
— 雷耶尔
source
172
需要注意的是jQuery的preventDefault也不会阻止其他左撇子的执行。那stopImmediatePropagation是为了什么
— 新
19
@CrescentFresh，它确实阻止了其他（随后绑定）的处理程序在触发事件的DOM节点上执行...。它只是不能阻止传播。
— 失眼
37
这些不是“两种阻止事件传播的方法吗？” e.preventDefault（）; 阻止默认操作，它不会停止事件传播，这是通过e.stopPropagation（）完​​成的。
— Timo Tijhof 2012年
24
这个问题及其答案与jQuery有关。如果您是来这里寻找简单的javascript答案的，请参阅event.preventDefault（）与return false（无jQuery）的对比
— Oriol 2013年
5
这个答案有一张解释这一切的表格stackoverflow.com/a/5302939/759452
— Adrien

Answers:

2817

return false从jQuery事件处理程序内部进行调用实际上e.preventDefault与e.stopPropagation在传递的jQuery.Event对象上调用两者相同 。

e.preventDefault()将防止发生默认事件，e.stopPropagation()将防止事件冒泡，并且return false两者都将发生。请注意，此行为不同于正常（非jQuery的）事件处理程序，其中，值得注意的是，return false也没有冒泡停止该事件。

资料来源：John Resig

使用event.preventDefault（）代替“ return false”来取消href点击有什么好处？

— karim79
source
126
return false从DOM2处理程序（addEventListener）根本不执行任何操作（既不会阻止默认设置也不会停止冒泡；从Microsoft DOM2-ish处理程序（attachEvent），它可以阻止默认设置但不会冒泡；从DOM0处理程序（onclick="return ..."），它可以防止默认设置（提供你包括return在属性），但不起泡;从jQuery的事件处理程序，它都，因为这是一个jQuery的事情。详细信息和现场试验在这里
— TJ克罗德
12
在此处定义“传播”和“默认”将很有帮助。我让他们一头雾水。它是否正确？ 传播 =我的代码（父元素的JavaScript事件处理程序）。 默认 =浏览器代码（链接，文本选择等）
— Bob Stein
5
冒泡到底是什么意思？例？
— Govinda Sakhare
5
1为指出的是，return false确实不停止在非jQuery的事件处理程序事件传播。即<a href="#" onclick="return false">Test</a>它不冒泡停止该事件。
— Doug S
424

根据我的经验，使用event.preventDefault（）至少比使用return false具有明显的优势。假设您正在捕获锚标记上的click事件，否则如果要从当前页面导航到用户，这将是一个大问题。如果您的点击处理程序使用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.
});
— 杰夫·普尔顿
source
68
确实，相反的行为在进行渐进增强时通常更可取（我认为这可能是覆盖默认操作的最可能原因）
— meandmycode 2012年
两种方法都可以阻止事件的默认行为，这仅与您要解决的问题有关。
— Ferkze
102

顾名思义，这不是一个“ JavaScript”问题。这是关于jQuery设计的问题。

jQuery的和以前链接引用来自约翰Resig的（在karim79的 消息）似乎是如何事件处理程序的一般工作的源误解。

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

MDN的文档说明return false了事件处理程序的工作方式

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

有关更多阅读，请参阅MSDN上的attachEvent和W3C DOM 2事件文档。

— 加勒特
source
6
@rds表示“ preventDefault不会停止事件通过DOM的进一步传播。应为此使用event.stopPropagation。”
— 加勒特
的回答上一个密切相关的问题称，之前HTML 5，从事件处理程序返回false没有specced作为对所有做任何事情。现在，也许这是对（难以理解的）规范的错误解释，或者尽管没有被严格说明，但所有浏览器的解释都return false与相同event.preventDefault()。但是我不知道。足以让我沾上少许盐。
— Mark Amery
9
我讨厌Google中每个javascript搜索结果实际上都是关于jQuery +1的
— Alexander Derck
他已将其标记为JavaScript和jQuery，并且都是正确的。 jQuery只是JavaScript的一个子集，而不是它自己的语言。
— ProfK
41

您可以在onClick事件中为一个元素挂很多功能。您如何确定false一个将是最后一个被解雇的人？preventDefault另一方面肯定会只阻止元素的默认行为。

— 埃尔达（Eldar Djafarov）
source
20

我认为

event.preventDefault()

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

您可以在事件取消的W3C规范中阅读此内容。

同样，您不能在所有情况下都使用return false。当在href属性中提供javascript函数时，如果返回false，则用户将被重定向到写有错误字符串的页面。

— 拉胡尔
source
4
我从未遇到过任何浏览器。也许您将其与<a href="javascript:return false"某物混淆？
— mplungjan '02
10
-1; 声称返回false的href将生成一个文本页面，上面写有单词“ false”是完全废话。
— Mark Amery
1
（减）1; 链接断开+完全废话
— 菲尔（Phil）
15

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

但是，如果您确定代码不会触发任何异常，则可以使用任何所需的方法。

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

$('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
— 娜迦·斯里努·卡普塞蒂
source
1

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

event.preventDefault()

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

— 双唇0165
source
11
为什么更好？您实际上在这里给出了零理由。-1。
— Mark Amery
如果存在多个事件绑定，则e.preventDefault（）的目标比返回false更有针对性。
— 泰格'17
preventDefault是一些英语单词，我理解它“防止默认值”。return false是一些我理解的英语单词，它“返回假”，但是直到我谷歌使用这个密码后，我才知道为什么。另外，我可以分别控制stopPropagation和preventDefault 。
— 琼
1

return false和之间的主要区别event.preventDefault()是，下面的代码return false将不会执行，并且event.preventDefault()如果您的代码将在此语句后执行，则不会。

当您编写return false时，它将在后台为您做以下事情。

* Stops callback execution and returns immediately when called.
* event.stopPropagation();
* event.preventDefault();
— 阿卜杜拉·肖阿布
source
1

e.preventDefault（）;

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

实例示例：-

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

原因：-

使用的原因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>
展开摘要

返回False;

它只是停止执行function（）。

“ 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>
展开摘要

— 帕斯·拉瓦尔（Parth Raval）
source
1

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

所以我们可以简单地说，返回false jQuery等于：

返回false是e.preventDefault和e.stopPropagation

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

基本上使用启动前return false;，先了解什么e.preventDefault();和e.stopPropagation();做什么，然后，如果你认为你既需要在同一时间，然后简单地使用它。

所以基本上这段代码如下：

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

是等于该代码：

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
— 阿里雷扎
source
1

根据我的经验，event.stopPropagation（）主要用于CSS效果或动画作品中，例如，当您同时对卡片和按钮元素都具有悬停效果时，当您在按钮上悬停时，卡片和按钮的悬停效果都会在这种情况下触发，您可以使用event.stopPropagation（）停止冒泡操作，而event.preventDefault（）用于阻止浏览器操作的默认行为。例如，您有一个表单，但您仅为该提交操作定义了click事件，如果用户通过按Enter提交表单，则由keypress事件触发的浏览器，而不是您的click事件，此处应使用event.preventDefault（）以避免不合适行为。我不知道该死的是假。对不起。有关更多说明，请访问此链接并在＃33行播放https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

— Sathish Shajahan
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.