当我想阻止其他事件处理程序在触发某个事件后执行时,我可以使用以下两种技术之一。我将在示例中使用jQuery,但这也适用于普通JS:

1.event.prpreventDefault()

$('a').click(function (e) {
    // custom handling here
    e.preventDefault();
});

2.返回false

$('a').click(function () {
    // custom handling here
    return false;
});

这两种停止事件传播的方法之间有什么显著的区别吗?

对我来说,返回false;与执行方法相比,它更简单、更短,并且可能更不容易出错。使用该方法,您必须记住正确的大小写、括号等。

此外,我必须在回调中定义第一个参数才能调用该方法。也许,我应该避免这样做,而是使用preventDefault,这是有原因的吗?更好的方法是什么?


当前回答

根据我的经验,与使用return false相比,使用event.prpreventDefault()至少有一个明显的优势。假设您正在捕获锚标记上的单击事件,否则,如果用户被导航离开当前页面,这将是一个大问题。如果您的点击处理程序使用return false来阻止浏览器导航,则会导致解释器无法到达return语句,浏览器将继续执行锚标记的默认行为。

$('a').click(function (e) {
  // custom handling here

  // oops...runtime error...where oh where will the href take me?

  return false;
});

使用event.prpreventDefault()的好处是可以将其作为处理程序中的第一行添加,从而确保锚点的默认行为不会被触发,无论是否未到达函数的最后一行(例如运行时错误)。

$('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的旧时代开始,事件处理程序就一直以这种方式工作。

返回false的事件处理程序内容属性和事件处理程序IDL属性将阻止该事件处理程序的默认操作。

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

有关进一步阅读,请参阅[[W3C DOM 2事件文档]][1]。

e.预防违约();

它只是停止元素的默认操作。

实例示例:-

阻止超链接跟随URL,阻止提交按钮提交表单。当您有多个事件处理程序,而您只想阻止默认事件发生,多次发生时,为此,我们需要在函数()的顶部使用。

原因:-

使用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()“>防止页面重定向</a><script type=“text/javascript”>函数doSomethingElse(){console.log(“这是测试…”);}$(“a”).点击(函数(e){e.预防违约();});</script></body></html>

return False;

它只是停止函数()的执行。

“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”>函数returnFalse(){console.log(“在没有位置重定向的情况下返回false….”)return false;location.href=“http://www.google.com/";}</script></body></html>

我想

event.prpreventDefault()

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

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

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

根据我的经验,我认为使用

event.preventDefault() 

几乎在我们需要时停止或阻止提交事件,而不是返回falseevent.prpreventDefault()工作正常。

基本上,通过这种方式,您可以将事情组合起来,因为jQuery是一个主要关注HTML元素的框架,您基本上可以防止出现默认情况,但同时,您也可以停止传播以产生气泡。

所以我们可以简单地说,jQuery中的return false等于:

return false为e.preventDefault AND e.stopPropagation

但也不要忘了这一切都在jQuery或DOM相关函数中,当您在元素上运行它时,基本上,它会阻止所有的触发,包括默认行为和事件传播。

基本上在开始使用return false之前;,首先了解e.preventDefault();和e.停止传播();如果你认为你同时需要这两者,那就用它吧。

所以基本上这段代码如下:

$('div').click(function () {
  return false;
});

等于此代码:

$('div').click(function (event) {
  event.preventDefault();
  event.stopPropagation();
});