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


当前回答

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

其他回答

我想

event.prpreventDefault()

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

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

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

preventDefault()和return false是防止发生默认事件的不同方法。

例如,当用户单击外部链接时,我们应该显示一个确认模式,询问用户是否重定向到外部网站:

hyperlink.addEventListener('click', function (e) {
    // Don't redirect the user to the link
    e.preventDefault();
});

或者我们不想在单击表单的提交按钮时提交表单。相反,我们希望首先验证表单:

submitButton.addEventListener('click', function (e) {
    // Don't submit the form when clicking a submit
    e.preventDefault();
});

差异

如果使用addEventListener方法处理事件,return false对默认行为没有任何影响。它仅在事件处理程序声明为元素的属性时有效:

hyperlink.addEventListener('click', function (e) {
     // Does NOT work
     return false;
 });
    
 // Work
 hyperlink.onclick = function (e) {
     return false;
};

根据HTML5规范,返回false将取消除mouseover事件之外的事件。

良好做法

建议在事件处理程序中使用preventDefault方法,而不是返回false。因为后者只能使用onclick属性,该属性将删除同一事件的其他处理程序。如果您使用jQuery来管理事件,则可以在事件处理程序中使用return false:

$(element).on('click', function (e) {
        return false;
});

在返回值false之前,处理程序将执行其他操作。问题是,如果处理程序中发生任何运行时错误,我们将无法在结尾处返回false语句。

在这种情况下,将采用默认行为:

$(element).on('click', function (e) {
    // Do something here, but if there's an error at runtime
    // ...
    return false;
});

我们可以在执行任何自定义处理程序之前使用preventDefault方法来避免这种情况:

$(element).on('click', function (e) {
    e.preventDefault();

    // Do something here
    // The default behavior is prevented regardless of errors at runtime
    // ...
});

很高兴知道

如果您使用jQuery来管理事件,那么return false的行为将与preventDefault()和stopPropagation()方法相同:

$(element).on('click', function (e) {
    // Prevent the default event from happening and
    // prevent the event from bubbling up to the parent element
    return false;
});

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

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

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

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

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

event.preventDefault() 

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

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

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

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

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

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

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