提问



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

最佳参考


来自的jQuery事件处理程序中的return false实际上与在传递的jQuery.Event对象上调用e.preventDefaulte.stopPropagation相同。[47]


e.preventDefault()将阻止发生默认事件,e.stopPropagation()将阻止事件冒泡,return false将同时执行两者。请注意,此行为与普通(非jQuery)事件处理程序不同,其中,return false确实不阻止事件冒泡。


资料来源:John Resig [48]


使用event.preventDefault()而不是return false取消href点击有什么好处? [49]

其它参考1


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

其它参考2


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


jQuery和John Resig之前链接的引用(在karim79的消息中)似乎是对事件处理程序如何工作的源头误解。[50] [51]


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


MDN的文档解释了事件处理程序中的return false如何工作[54]


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


有关进一步阅读,请参阅MSDN上的attachEvent和W3C DOM 2 Events文档。[55] [56]

其它参考3


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


燃烧你的编码在return false; vs event.preventDefault() vs event.stopPropagation() vs event.stopImmediatePropagation()上有一篇很棒的文章。[57]


注意:上面的 Fuel Your Coding 链接已经产生了5xx错误很长一段时间。我已经在互联网档案馆找到了它的副本,将其打印成PDF,并将其放在Dropbox中:return false; vs event.preventDefault() vs event.stopPropagation()上的已存档文章]] vs event.stopImmediatePropagation() (PDF) [58] [59]

其它参考4


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



  1. event.preventDefault();

  2. event.stopPropagation();

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



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

其它参考5


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

其它参考6


我认为


event.preventDefault()


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


您可以在W3C规范中了解事件取消。[61]


此外,你不能在任何情况下使用return false。当在href属性中提供javascript函数并且如果你返回false,那么用户将被重定向到写有false string的页面。

其它参考7


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


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


如果您仍然希望使用return false,那么您可以将整个处理程序代码放在try catch块中,如下所示:


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

其它参考8


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


event.preventDefault() 


几乎
        停止或阻止提交事件,只要我们需要而不是return false
   event.preventDefault()工作正常。

其它参考9


return falseevent.preventDefault()之间的主要区别在于return false下面的代码不会被执行,而event.preventDefault()中的代码将在此语句之后执行。


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


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