event.preventDefault（）与返回 false-解网

问：

当我想阻止其他事件处理程序在触发某个事件后执行时，我可以使用以下两种技术之一。我将在示例中使用 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 处理 dom-events 事件传播

181赞 Crescent Fresh 8/31/2009

请注意，jQuery 不会阻止其他处理程序执行。这就是目的。preventDefaultstopImmediatePropagation

19赞 eyelidlessness 10/17/2011

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

42赞 Timo Tijhof 1/9/2012

这不是“停止事件传播的两种方法”吗？ e.preventDefault（）;阻止默认操作，它不会停止事件传播，这是由 e.stopPropagation（）完成的。

30赞 Oriol 9/29/2013

这个问题及其答案是关于jQuery的。如果你来这里寻找一个普通的javascript答案，请参阅 event.preventDefault（） vs. return false （no jQuery）

6赞 Adriano 4/16/2014

这个答案有一个表格来解释这一切 stackoverflow.com/a/5302939/759452

答：

48赞 Eldar Djafarov 8/31/2009 #1

您可以在一个元素的事件上挂起许多函数。你怎么能确定那个会是最后一个开火的？另一方面，肯定会只阻止元素的默认行为。onClickfalsepreventDefault

0赞 peter 5/19/2022

不需要让最后一个事件处理程序返回 false。任何处理程序都可以返回 false 以防止默认行为。查看 myprogrammingnotes.com/...

24赞 rahul 8/31/2009 #2

我认为

event.preventDefault()

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

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

此外，您不能在所有情况下都使用 return false。在 href 属性中给出 javascript 函数时，如果返回 false，则用户将被重定向到写入 false 字符串的页面。

4赞 mplungjan 2/15/2012

不是在我见过的任何浏览器中。也许你把它混淆了？<a href="javascript:return false"

14赞 Mark Amery 1/24/2016

-1;声称返回 false 的 href 会生成一个写有“false”字样的文本页面，这完全是无稽之谈。

1赞 Phil 11/7/2017

（减）1;断开的链接+完全胡说八道

2976赞 karim79 8/31/2009 #3

return false在 jQuery 事件处理程序中，实际上与在传递的 jQuery.Event 对象上调用两者相同。e.preventDefaulte.stopPropagation

e.preventDefault()将阻止默认事件的发生，将阻止事件冒泡，并将同时执行这两项操作。请注意，此行为不同于普通（非 jQuery）事件处理程序，在普通（非 jQuery）事件处理程序中，值得注意的是，它不会阻止事件冒泡。e.stopPropagation()return falsereturn false

资料来源：John Resig

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

139赞 T.J. Crowder 11/30/2011

return false从 DOM2 处理程序（）完全不执行任何操作（既不阻止默认值也不停止冒泡;从 Microsoft DOM2 式处理程序（），它阻止默认值但不冒泡;从 DOM0 处理程序（），它阻止默认值（前提是您在属性中包含）但不冒泡;从 jQuery 事件处理程序中，它同时执行两者，因为这是 jQuery 的事情。详情和现场测试请点击此处addEventListenerattachEventonclick="return ..."return

14赞 Bob Stein 7/28/2013

在这里定义“传播”和“默认”会很有帮助。我一直在混淆他们。这是正确的吗？传播 = 我的代码（父元素的 JavaScript 事件处理程序）。默认值 = 浏览器代码（链接、文本选择等）

6赞 Govinda Sakhare 8/17/2016

冒泡的真正含义是什么？例？

6赞 Doug S 8/21/2016

+1 表示不会停止非 jQuery 事件处理程序中的事件传播。即 不会阻止事件冒泡。return false<a href="#" onclick="return false">Test</a>

1赞 Mikko Rantalainen 9/29/2022

@GovindaSakhare 如果你不知道事件冒泡是什么意思，你可能想阅读并理解整个页面：developer.mozilla.org/en-US/docs/Learn/JavaScript/......

117赞 Garrett 6/21/2010 #4

正如你所描述的那样，这不是一个“JavaScript”问题;这是一个关于jQuery设计的问题。

jQuery 和之前链接的 John Resig 引用（在 karim79 的消息中）似乎是对事件处理程序通常如何工作的根源误解。

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

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

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

如需进一步阅读，请参阅 [ [W3C DOM 2 事件文档]][1]。

6赞 Garrett 7/25/2011

@rds 也就是说，“preventDefault 不会阻止事件通过 DOM 进一步传播。 event.stopPropagation 应该用于此目的。

0赞 Mark Amery 1/24/2016

一个密切相关问题的答案声称，在 HTML 5 之前，从事件处理程序返回 false 根本没有被指定为做任何事情。现在，也许这是对（难以理解的）规范的错误解释，或者尽管它没有从字面上指定，但所有浏览器的解释都与相同。但我不知道;这足以让我用一小撮盐来接受这个。return falseevent.preventDefault()

11赞 Alexander Derck 10/12/2016

我讨厌谷歌中的每个 javascript 搜索结果实际上都是关于 jQuery，+1

0赞 ProfK 1/28/2020

他将其标记为 JavaScript 和 jQuery，两者都是正确的。只是 JavaScript 的一个子集，而不是它自己的语言。jQuery

1赞 Garrett 11/15/2022

MSDN现在正在重写历史，假装它的历史现在是当前Firefox的历史。改写历史对政府来说并不是什么新鲜事，它是一种权力工具，是认知管理的工具。MSDN 用 event.returnValue 重写历史是多么随意和可笑。然而，事实并非如此。lists.w3.org/Archives/Public/www-style/2010Sep/0458.html —

457赞 Jeff Poulton 1/23/2011 #5

根据我的经验，使用 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.
});

72赞 meandmycode 4/28/2012

虽然确实如此，但在进行渐进式增强时，相反的行为通常更可取（我认为这可能是覆盖默认操作的最可能原因）

0赞 Fabio Martins 2/4/2020

这两种方法都是阻止事件默认行为的方法，只是您要解决什么问题的问题。

77赞 JAAulde 4/10/2011 #6

一般来说，你的第一个选项（）是要采取的选项，但你必须知道你所处的环境以及你的目标是什么。preventDefault()

Fuel Your Coding 有一篇关于返回 false 的好文章; vs event.preventDefault（） vs event.stopPropagation（） vs event.stopImmediatePropagation（）。

0赞 JAAulde 8/2/2017

@VisruthCV 请参阅我添加的带有存档版本链接的注释

62赞 James-Jesse Drinkard 2/19/2013 #7

使用 jQuery 时，调用它时会做 3 件独立的事情：return false

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

有关更多信息和示例，请参见 jQuery 事件：Stop （Mis）Using Return False。

0赞 Fabio Martins 2/4/2020

如果代码的其他部分正在侦听此事件， event.stopPropagation（）;会取消他们的回电吗？

19赞 Naga Srinu Kapusetti 3/10/2013 #8

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

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

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

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

0赞 Dilip Langhanoja 9/29/2014 #9

根据我的经验，我的观点是，使用总是更好

event.preventDefault()

几乎停止或阻止提交事件，只要我们需要，而不是工作正常。return falseevent.preventDefault()

14赞 Mark Amery 1/24/2016

更好的为什么？你在这里给出的字面上没有任何理由。-1.

0赞 Taiger 8/23/2017

在有多个事件绑定的情况下，e.preventDefault（）比 return false 更有针对性。

0赞 Joan 3/29/2018

preventDefault是一些英语单词，我理解它“防止默认”。是一些英语单词，我理解它“返回 false”，但我不知道为什么，直到我谷歌这个神秘的代码。还有奖金，我可以单独控制和.return falsestopPropagationpreventDefault

5赞 Abdullah Shoaib 2/9/2018 #10

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

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

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

1赞 Parth Raval 4/27/2018 #11

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>

1赞 Alireza 7/18/2018 #12

基本上，这种方式可以组合东西，因为jQuery是一个主要关注HTML元素的框架，你基本上阻止了默认元素，但与此同时，你停止了传播以冒泡。

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

return 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();
});

1赞 Sathish Shajahan 5/14/2019 #13

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

0赞 samnoon 9/29/2022 #14

preventDefault()并且是防止默认事件发生的不同方法。return false

例如，当用户点击外部链接时，我们应该显示一个确认模式，要求用户是否重定向到外部网站：

hyperlink.addEventListener('click', function (e) {
    // Don't redirect the user to the link
    e.preventDefault();
});

或者，我们不想在单击表单的提交按钮时提交表单。相反，我们首先要验证表单：

submitButton.addEventListener('click', function (e) {
    // Don't submit the form when clicking a submit
    e.preventDefault();
});

差异

return false如果使用该方法处理事件，则对默认行为没有任何影响。仅当事件处理程序声明为元素的属性时，它才有效：addEventListener

hyperlink.addEventListener('click', function (e) {
     // Does NOT work
     return false;
 });
    
 // Work
 hyperlink.onclick = function (e) {
     return false;
};

根据规范，将取消除事件外的活动。HTML 5return falsemouseover

良好做法

建议使用该方法，而不是在事件处理程序中。因为后者仅适用于使用属性，该属性将删除同一事件的其他处理程序。preventDefaultreturn falseonclick
如果您使用 jQuery 来管理事件，则可以在事件处理程序中使用：return false

$(element).on('click', function (e) {
        return false;
});

在返回 false 值之前，处理程序将执行其他操作。问题是，如果处理程序中发生任何运行时错误，我们将不会到达最后的返回 false 语句。

在这种情况下，将采用默认行为：

$(element).on('click', function (e) {
    // Do something here, but if there's an error at runtime
    // ...
    return false;
});

我们可以通过在执行任何自定义处理程序之前使用该方法来避免这种情况：preventDefault

$(element).on('click', function (e) {
    e.preventDefault();

    // Do something here
    // The default behavior is prevented regardless of errors at runtime
    // ...
});

很高兴知道

如果您使用 jQuery 来管理事件，则行为将与和方法相同：return falsepreventDefault()stopPropagation()

$(element).on('click', function (e) {
    // Prevent the default event from happening and
    // prevent the event from bubbling up to the parent element
    return false;
});

上一个：使用 javascript（或 jQuery）选择和操作 CSS 伪元素，例如：：before 和：：after

下一个：如何检测元素外部的点击？

event.preventDefault（）与返回 false

event.preventDefault() vs. return false

1.`event.preventDefault()`

2.`return false`

评论

评论

评论

评论

评论

评论

评论

评论

评论

差异

良好做法

很高兴知道

event.preventDefault（） 与返回 false

event.preventDefault() vs. return false

1.event.preventDefault()

2.return false

评论

评论

评论

评论

评论

评论

评论

评论

评论

差异

良好做法

很高兴知道

event.preventDefault（）与返回 false

1.`event.preventDefault()`

2.`return false`