event.preventDefault()与返回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与在传递的jQuery.Event对象上调用e.preventDefaulte.stopPropagation效果相同。

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

资料来源:John Resig

通过“return false”使用event.preventDefault()取消href点击有什么好处?


根据我的经验,当使用event.preventDefault()使用return false时,至少有一个明显的优势。 假设您正在捕获锚标签上的点击事件,否则,如果用户要离开当前页面,这将是一个大问题。 如果您的点击处理程序使用return false来阻止浏览器导航,则会打开解释程序不会到达返回语句的可能性,并且浏览器将继续执行锚点标记的默认行为。

$('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上的attachEvent和W3C DOM 2事件文档。

链接地址: http://www.djcxy.com/p/431.html

上一篇: event.preventDefault() vs. return false

下一篇: How to get the current branch name in Git?