协慌网

登录 贡献 社区

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 ?有什么更好的方法?

答案

jQuery 事件处理程序中 return false e.preventDefault与在传递的jQuery.Event 对象上调用e.preventDefaulte.stopPropagation相同

e.preventDefault()将阻止发生默认事件, e.stopPropagation()将阻止事件冒泡并return false将同时执行。请注意,此行为与正常 (非 jQuery 的)事件处理程序不同,其中,值得注意的是, return false 冒泡停止该事件。

资料来源: John Resig

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

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

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

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

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

MDN文档解释了事件处理程序中return false的工作原理

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

有关进一步阅读,请参阅MSDN 上的 attachEventW3C DOM 2 Events 文档