首页 文章

event.preventDefault（）与return false

提问于
浏览 次
2729

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

1. event.preventDefault（）

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

2.返回false

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

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

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

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

javascript jquery javascript-events event-handling event-propagation

12 回答

  • 95

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

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

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

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

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

    有关进一步阅读，请参阅attachEvent on MSDN和W3C DOM 2 Events documentation .

    回复于
  • 40

    我认为

    event.preventDefault()

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

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

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

    回复于
  • 18

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

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

    如果你仍然希望返回 false ，那么你可以将整个处理程序代码放在try catch块中，如下所示：

    $('a').click(function (e) {
  try{
      your code here.........
  }
   catch(e){}
  return false;
});
    回复于
  • 2660

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

    燃料你的编码有一个很好的article on return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() .

    NOTE: 上面的Fuel您的编码链接已经产生5xx错误很长一段时间了 . 我在Internet Archive找到了它的副本，将其打印成PDF，并将其放入Dropbox：Archived article on return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation() (PDF)

    回复于
  • 61

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

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

    event.preventDefault()

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

    回复于
  • 54

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

    回复于
  • 1

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

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

    return false is e.preventDefault AND e.stopPropagation

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

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

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

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

    这个代码是 equal ：

    $('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});
    回复于
  • 403

    e.preventDefault();

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

    实例Ex.:-

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

    原因： -

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

    <!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; ”将结束整个过程的执行 .

    原因： -

    使用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>
    回复于
  • 0

    来自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?

    回复于
  • 1

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

    • event.preventDefault();

    • event.stopPropagation();

    • 停止回调执行并在调用时立即返回 .

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

    回复于
  • 1

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

    当你写return false时，它会在幕后为你做以下事情 .

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

相关问题