event.preventDefault（）与返回false|jquery问答

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

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点击有什么好处？

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

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

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

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

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

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

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

通常，您要采用的第一个选项（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有关事件取消的规范中阅读此内容。

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

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

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

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

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

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

event.preventDefault()

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

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

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

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

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>

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

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

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

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

本文地址：http://jquery.askforanswer.com/event-preventdefaultyufanhuifalse.html
文章标签：dom-events , event-handling , event-propagation , javascript , jquery
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

1。 event.preventDefault()

2。 return false

文件下载

1。 `event.preventDefault()`

2。 `return false`