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


当前回答

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

加油你的编码有一篇很棒的文章,返回错误;vs event.prpreventDefault()vs event.stopPropagation()vs event.stopImmediatePropagation)。

其他回答

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

jQuery和之前链接的John Resig引用(在karim79的消息中)似乎是对事件处理程序一般工作方式的误解。

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

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

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

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

根据我的经验,event.stopPropagation()主要用于CSS效果或动画作品,例如,当你对卡片和按钮元素都有悬停效果时,当你将鼠标悬停在按钮上时,卡片和按钮都会触发悬停效果。在这种情况下,你可以使用event.stopPropagation(,event.prpreventDefault()用于防止浏览器操作的默认行为。例如,您有表单,但您只为提交操作定义了单击事件,如果用户通过按enter键提交表单,则浏览器由按键事件触发,而不是单击事件。在这里,您应该使用event.prpreventDefault()来避免不适当的行为。我不知道什么是返回错误;对不起。要了解更多信息,请访问此链接并使用第33行https://www.codecademy.com/courses/introduction-to-javascript/lessons/requests-i/exercises/xhr-get-request-iv

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

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

加油你的编码有一篇很棒的文章,返回错误;vs event.prpreventDefault()vs event.stopPropagation()vs event.stopImmediatePropagation)。

从jQuery事件处理程序中返回false实际上与对传递的jQuery.event对象同时调用e.preventDefault和e.stopPropagation相同。

e.preventDefault()将防止发生默认事件,e.stopPropagation()将阻止事件冒泡,返回false将同时执行这两种操作。请注意,这种行为不同于正常(非jQuery)事件处理程序,特别是,返回false不会阻止事件冒泡。

来源:John Resig

使用event.prpreventDefault()而不是“return false”来取消href单击有什么好处?