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 ?有什么更好的方法?

答案

jQuery 事件处理程序中 return false e.preventDefault与在传递的jQuery.Event 对象上调用e.preventDefaulte.stopPropagation相同

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 和John Resig 先前链接的引用 (在karim79 的 消息中 )似乎是对事件处理程序在一般情况下如何工作的误解。

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

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

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

有关更多阅读,请参阅MSDN 上的 attachEventW3C DOM 2 事件文档

通常,您的第一个选项( preventDefault() )是您要使用的选项,但是您必须知道您所处的环境以及目标是什么。

《加油您的代码》中有一篇很棒的文章,关于return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()

使用 jQuery 时, return false会在您调用它时做 3 件事:

  1. event.preventDefault();
  2. event.stopPropagation();
  3. 停止回调执行,并在调用后立即返回。

有关更多信息和示例,请参见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()可以停止或阻止 Submit 事件。

之间的主要区别return falseevent.preventDefault()是下面的代码return false将不被执行, event.preventDefault()情况下,你的代码将这个语句后执行。

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

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