关于Javascript：event.preventdefault()vs.return false


event.preventDefault() vs. return false

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

1。event.preventDefault()

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

2。return false

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

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

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

另外，我必须在回调中定义第一个参数，以便能够调用该方法。也许，我有一些理由不应该这样做，而是使用preventDefault？更好的方法是什么？

相关讨论

jquery事件处理程序中的return false实际上与对传递的jquery.event对象同时调用e.preventDefault和e.stopPropagation相同。

e.preventDefault()将防止违约事件的发生，e.stopPropagation()将防止违约事件的冒泡，return false将两者兼而有之。请注意，此行为与普通(非jquery)事件处理程序不同，在正常(非jquery)事件处理程序中，return false不会阻止事件冒泡。

资料来源：John Resig

使用event.preventDefault()而不是"return false"取消一个href单击有什么好处吗？

相关讨论

根据我的经验，使用event.preventDefault()比使用return false至少有一个明显的优势。假设您正在一个锚标记上捕获click事件，否则如果将用户从当前页面导航开，这将是一个大问题。如果单击处理程序使用RETURN FALSE阻止浏览器导航，则会打开解释程序无法到达RETURN语句的可能性，并且浏览器将继续执行定位标记的默认行为。

1
2
3
4
5
6
7
$('a').click(function (e) {
  // custom handling here

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

  return false;
});

使用event.preventDefault()的好处是，您可以将其添加为处理程序中的第一行，从而确保锚的默认行为不会激发，无论函数的最后一行是否未到达(例如运行时错误)。

1
2
3
4
5
6
7
$('a').click(function (e) {
  e.preventDefault();

  // custom handling here

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

正如您所说，这不是一个"javascript"问题；而是一个关于jquery设计的问题。

jquery和先前链接的JohnResig引用(在Karim79的消息中)似乎是事件处理程序在一般情况下如何工作的来源误解。

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

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

jquery中发生的事情与事件处理程序中发生的事情不同。DOM事件监听器和MSIE"附加"事件是完全不同的事情。

有关进一步的阅读，请参阅msdn上的AttachEvent和W3CDom2事件文档。

相关讨论

一般来说，你的第一个选择(preventDefault())是你要选择的，但是你必须知道你所处的环境和你的目标是什么。

燃料你的代码有一篇关于return false;vs event.preventDefault()vs event.stopPropagation()vs event.stopImmediatePropagation()的伟大文章。

相关讨论

使用jquery时，当您调用return false时，它正在做3件独立的事情：

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

    • 有关更多信息和示例，请参阅jquery events:stop(mis)using return false。

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

    我想

    event.preventDefault()

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

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

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

    相关讨论

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

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

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

    1
    2
    3
    4
    5
    6
    7
    $('a').click(function (e) {
      try{
          your code here.........
      }
       catch(e){}
      return false;
    });

    e.preventDefault()；

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

    Instance Ex.:-

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

    Reason:-

    使用e.preventDefault();的原因是，在我们的代码中，代码中出现了一些错误，然后它将允许执行链接或表单以提交，或者允许执行或允许执行您需要执行的任何操作。&"链接"或"提交"按钮将被提交，但仍允许进一步传播事件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
       <head>
          <meta charset="utf-8">
         
       </head>
       <body>
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
          Preventsss page from redirect
          <script type="text/javascript">
             function doSomethingElse(){
               console.log("This is Test...");
             }
             $("a").click(function(e){
              e.preventDefault();
             });
         
       </body>
    </html>

    返回错误；

    它只是停止函数()的执行。

    "EDOCX1"〔5〕将结束整个过程的执行。

    Reason:-

    使用RETURN FALSE的原因是您不希望在严格模式下再执行函数。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
       <head>
          <meta charset="utf-8">
         
       </head>
       <body>
          Blah
          <script type="text/javascript">
             function returnFalse(){
             console.log("returns false without location redirection....")
                 return false;
                 location.href="http://www.google.com/";
             
             }
         
       </body>
    </html>

    return false和event.preventDefault()的主要区别是，您在return false以下的代码将不被执行，在event.preventDefault()的情况下，您的代码将在该语句之后执行。

    当你写"返回错误"时，它会在幕后为你做以下事情。

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

    根据我的经验，我认为最好使用

    1
    event.preventDefault()

    实际无论何时，只要我们要求而不是return false停止或防止提交事件event.preventDefault()工作正常。

    相关讨论

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

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

    返回false是e.preventDefault和e.stoppropagation

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

    基本上，在开始使用return false;之前，先了解e.preventDefault();和e.stopPropagation();的功能，然后如果您认为同时需要这两种功能，那么只需使用即可。

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

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

    等于此代码：

    1
    2
    3
    4
    $('div').click(function (event) {
      event.preventDefault();
      event.stopPropagation();
    });