当我想在某个事件被触发后阻止其他事件处理程序执行时,我可以使用两种技术之一。我将在示例中使用 jQuery,但这也适用于 plain-JS:
event.preventDefault()
$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
return false
$('a').click(function () {
// custom handling here
return false;
});
这两种停止事件传播的方法之间有什么显着差异吗?
对我来说, return false;
比执行方法更简单,更短并且可能更不容易出错。使用该方法,您必须记住正确的套管,括号等。
另外,我必须在回调中定义第一个参数才能调用该方法。也许,为什么我应该避免这样做并使用preventDefault
?有什么更好的方法?
从jQuery 事件处理程序中 return false
e.preventDefault
与在传递的jQuery.Event 对象上调用e.preventDefault
和e.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 上的 attachEvent和W3C DOM 2 Events 文档 。