题 event.preventDefault()与return false


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


2652
2017-08-31 11:58


起源


注意jQuery的 preventDefault 不 不 防止其他人被执行。那是什么 stopImmediatePropagation 是为了。 - Crescent Fresh
@CrescentFresh,它确实阻止其他(后来绑定的)处理程序在DOM节点上执行...触发事件。它只是不阻止传播。 - eyelidlessness
这些不是“阻止事件传播的两种方法吗?” e.preventDefault();防止默认操作,它不会停止事件传播,这是由e.stopPropagation()完​​成的。 - Krinkle
这个问题及其答案都是关于jQuery的。如果你来这里寻找一个简单的javascript答案,请参阅 event.preventDefault()与return false(没有jQuery) - Oriol
preventDefault(),stopPropagation(),stopImmediatePropagation(),返回false,所有这4个方法用于取消事件或阻止它冒泡。一些信息在这里: markupjavascript.blogspot.in/2013/10/... - Mandeep Pasbola


答案:


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


2601
2017-08-31 12:05



return false 来自DOM2处理程序(addEventListener)什么也不做(既不会阻止默认也不会停止冒泡;来自Microsoft DOM2-ish处理程序(attachEvent),它可以防止默认但不会冒泡;来自DOM0处理程序(onclick="return ..."),它可以防止默认(如果你包括 return在属性中)但不冒泡;从jQuery事件处理程序,它做到了两者,因为这是一个jQuery的事情。 详情和现场测试 - T.J. Crowder
在这里定义“传播”和“默认”会很有帮助。我一个人让他们感到困惑。它是否正确? 传播 =我的代码(父元素的JavaScript事件处理程序)。 默认 =浏览器代码(链接,文本选择等) - Bob Stein
冒泡的真正含义是什么?例? - Pablo Escobar
注意到+1 return false 不 不 停止非jQuery事件处理程序中的事件传播。即 <a href="#" onclick="return false">Test</a> 不 不 阻止事件冒泡。 - Doug S


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

393
2018-01-22 22:37



虽然这是正确的,但在进行渐进增强时(通常我认为可能是覆盖默认操作的最可能原因),相反的行为通常更可取。 - meandmycode


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

jQuery和 以前链接的引文 从 John Resig (在 karim79的  信息)似乎是对事件处理程序如何工作的误解。

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

来自MDN的文档 解释如何 return false 在事件处理程序中工作

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

如需进一步阅读,请参阅 MSDN上的attachEvent 和 W3C DOM 2事件文档


89
2018-06-20 21:31



关于什么 developer.mozilla.org/en/DOM/event.preventDefault ? - rds
@rds说“preventDefault不会阻止事件通过DOM进一步传播。应该使用event.stopPropagation。” - Garrett
一个 回答 在一个密切相关的问题上声称,在HTML 5之前,从事件处理程序返回false不是 specced 做任何事情。现在,也许这是对(难以理解)规范的错误解释,或者可能不是从字面上看所有浏览器的解释 return false 同样的 event.preventDefault()。但我不知道;这足以让我用一点盐来取这个。 - Mark Amery
我讨厌google中的每个javascript搜索结果实际上是关于jQuery,+ 1 - Alexander Derck


一般来说,你的第一选择(preventDefault())是一个可以采取的,但你必须知道你所处的环境以及你的目标是什么。

为你的编码加油 很棒 文章 return false; VS event.preventDefault() VS event.stopPropagation() VS event.stopImmediatePropagation()

注意: 该 为你的编码加油 上面的链接已经产生5xx错误很长一段时间了。我在中找到了它的副本 互联网档案,将其打印为PDF,并将其放入Dropbox: 存档 文章 return false; VS event.preventDefault() VS event.stopPropagation() VS event.stopImmediatePropagation()  (PDF)


58
2018-04-09 18:32



参考链接断开,给出502错误。 - Visruth
@VisruthCV查看我添加的注释以及存档版本的链接 - JAAulde


使用jQuery时, return false 当你打电话时它正在做三件事:

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

看到 jQuery事件:停止(误)使用返回False 了解更多信息和示例。


51
2018-02-19 15:54





你可以挂上很多功能 onClick 一个元素的事件。你怎么能确定 false 一个将是最后一个开火? preventDefault 另一方面肯定只会阻止元素的默认行为。


38
2017-08-31 12:02





我认为

event.preventDefault()

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

您可以在W3C规范中阅读此内容 事件取消

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


18
2017-08-31 12:04



不在我见过的任何浏览器中。也许你对此感到困惑 <a href="javascript:return false" 或者其他的东西? - mplungjan
-1;声称返回false的href会生成一个文字页面,上面写着“false”字样是完全无稽之谈。 - Mark Amery
(减)1;断链+完全废话 - Phil


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

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

如果你还想继续回归 false,然后你可以把你的整个处理程序代码放在try catch块中,如下所示:

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

13
2018-03-09 19:27