event.preventDefault()与return false

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

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

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的和以前链接引用来自约翰Resig的(在karim79的 消息)似乎是如何事件处理程序的一般工作的源误解.

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

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

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

有关进一步阅读,请参阅MSDN上的attachEvent和W3C DOM 2 Events文档.

Answer 4

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

燃料你的编码有关return false;vs event.preventDefault()vs event.stopPropagation()vsevent.stopImmediatePropagation()的精彩文章.

Answer 5

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

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

有关更多信息和示例,请参阅jQuery事件:停止(误)使用Return False.

Answer 6

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

Answer 7

我认为

event.preventDefault()

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

您可以在W3C规范中了解事件取消.

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

Answer 8

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

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

如果你仍然想要返回false,那么你可以将整个处理程序代码放在try catch块中,如下所示:

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

Answer 9

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

当您编写 return false 时，它​​会在幕后为您执行以下操作。

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