Question

当我想阻止某个事件被触发后执行其他事件处理程序时，我可以使用两种技术之一。我将在示例中使用jQuery，但这也适用于plain-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代替？什么是更好的方式？

Answer 1

来自的jQuery事件处理程序中的

return false实际上与调用传递的jQuery.Event object. e.preventDefault和e.stopPropagation相同>

e.preventDefault()会阻止发生默认事件，e.stopPropagation()会阻止事件冒泡，return false会同时执行这两项操作。请注意，此行为与普通（非jQuery）事件处理程序不同，其中，return false 不阻止事件冒泡。

来源：John Resig

Any benefit to using event.preventDefault() over "return false" to cancel out an href click?

Answer 2

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

Answer 3

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

jQuery和来自previously linked citation的John Resig（karim79's message）似乎是对事件处理程序如何工作的误解。

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

documentation from MDN解释了事件处理程序中的return false如何工作

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

如需进一步阅读，请参阅attachEvent on MSDN和W3C DOM 2 Events documentation。

Answer 4

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

为您的编码加油有一个很棒的article on return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()。

Answer 5

使用jQuery时，return false在调用时会执行3个单独的操作：

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

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

Answer 6

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

Answer 7

我认为

event.preventDefault()

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

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

此外，您无法在任何情况下使用return false。在href属性中提供javascript函数时，如果返回false，则用户将被重定向到写入了错误字符串的页面。

Answer 8

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

但如果您确定代码不会触发任何异常，那么您可以选择任何您想要的方法。

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

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

Answer 9

根据我的经验，我的意见是，使用

总是更好

event.preventDefault()

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

Answer 10

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

当你写回报false时，它会在幕后为你做以下事情。

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

Answer 11

<强> e.preventDefault（）;

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

实例例： -

阻止超链接跟随URL，阻止提交按钮提交表单。当你有许多事件处理程序而你只是想阻止发生默认事件时，＆amp;多次出现，因为我们需要在函数（）的顶部使用。

原因： -

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

＆＃13;

<!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>

＆＃13;

返回False;

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

＆＃34; return false;＆＃34;将结束整个过程的执行。

原因： -

使用return false的原因;是你不想在严格模式下再执行这个功能。

＆＃13;

<!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>

＆＃13;

Answer 12

防止默认

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

返回假

在回调中返回 false 会阻止默认行为。例如，在提交事件中，它不提交表单。 return false 也会停止冒泡，所以元素的父元素不会知道事件发生了。 return false 等价于 event.preventDefault() + event.stopPropagation()

Answer 13

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

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

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

Answer 14

根据我的经验，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

行中播放

event.preventDefault（）与return false

1。 `event.preventDefault()`

2。 `return false`

14 个答案:

event.preventDefault（）与return false

1。 event.preventDefault()

2。 return false

14 个答案:

1。 `event.preventDefault()`

2。 `return false`