当我想在某个事件被触发后阻止其他事件处理程序执行时,我可以使用两种技术之一。我将在示例中使用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
代替?有什么更好的方法?
return false
从 在jQuery事件处理程序中 实际上与调用两者相同 e.preventDefault
和 e.stopPropagation
在通过 jQuery.Event对象。
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事件文档。
使用jQuery时, return false
当你打电话时它正在做三件事:
event.preventDefault();
event.stopPropagation();
- 停止回调执行并在调用时立即返回。
看到 jQuery事件:停止(误)使用返回False 了解更多信息和示例。
你可以挂上很多功能 onClick
一个元素的事件。你怎么能确定 false
一个将是最后一个开火? preventDefault
另一方面肯定只会阻止元素的默认行为。
我认为
event.preventDefault()
是w3c指定的取消事件的方式。
您可以在W3C规范中阅读此内容 事件取消。
此外,您不能在任何情况下使用return false。在href属性中提供javascript函数时,如果返回false,则用户将被重定向到写入了错误字符串的页面。
我认为最好的办法是使用 event.preventDefault()
因为如果在处理程序中引发了一些异常,那么返回 false
语句将被跳过,行为将与您想要的相反。
但是,如果您确定代码不会触发任何异常,那么您可以使用您希望的任何方法。
如果你还想继续回归 false
,然后你可以把你的整个处理程序代码放在try catch块中,如下所示:
$('a').click(function (e) {
try{
your code here.........
}
catch(e){}
return false;
});