event.preventDefault()与返回false
当我想阻止其他事件处理程序在某个事件被触发后执行时,我可以使用两种技术之一。 我将在示例中使用jQuery,但这也适用于纯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;
比执行一个方法更简单,更短,也可能更less出错。 用这个方法,你必须记住正确的套pipe,括号等
另外,我必须在callback中定义第一个参数才能调用该方法。 也许,有一些原因,我应该避免这样做,并使用preventDefault
呢? 什么是更好的方法?
从jQuery事件处理程序中 return false
与在传递的jQuery.Event对象上同时调用e.preventDefault
和e.stopPropagation
相同。
e.preventDefault()
将防止发生默认事件, e.stopPropagation()
将防止事件冒泡,并return false
将做到这一点。 请注意,这种行为不同于普通 (非jQuery)事件处理程序,其中,特别是, return false
不会阻止事件冒泡。
资料来源: John Resig
使用event.preventDefault()比“return false”取消href点击有什么好处?
根据我的经验,当使用event.preventDefault()时,至less有一个明显的优势,就是使用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()的好处是你可以添加它作为处理程序的第一行,从而保证锚点的默认行为不会触发,不pipe函数的最后一行没有达到(例如运行时错误)。
$('a').click(function (e) { e.preventDefault(); // custom handling here // oops...runtime error, but at least the user isn't navigated away. });
这不是像你所说的那样,是一个“JavaScript”问题; 这是关于jQuerydevise的一个问题。
jQuery和John Resig 之前的相关引用 (在karim79的 消息中 )似乎是对事件处理程序一般工作方式的误解。
事实:返回false的事件处理程序会阻止该事件的默认操作。 它不会停止事件传播。 事件处理程序一直以这种方式工作,自从Netscape Navigator的旧时代以来。
MDN的文档解释了如何在事件处理函数中return false
jQuery中发生的事情与事件处理程序发生的不一样。 DOM事件监听器和MSIE“附加”事件是完全不同的事情。
有关详细信息,请参阅MSDN上的attachEvent和W3C DOM 2 Events文档 。
一般来说,您的第一个选项( preventDefault()
)是您要采取的选项,但是您必须知道您处于什么样的环境以及您的目标是什么。
燃料您的编码有一个伟大的文章return false;
vs event.preventDefault()
vs event.stopPropagation()
vs event.stopImmediatePropagation()
。
注意:上面的Fuel Your Coding链接已经产生了5xx错误很长时间了。 我在Internet Archive中find它的一个副本,将它打印到PDF中,并将其放入Dropbox: 归档文章return false;
vs event.preventDefault()
vs event.stopPropagation()
vs event.stopImmediatePropagation()
(PDF)
当使用jQuery时, return false
在你调用它时做了三件事情:
-
event.preventDefault();
-
event.stopPropagation();
- 停止callback执行,并在调用时立即返回。
查看jQuery事件:停止(错误)使用返回False获取更多信息和示例。
您可以在onClick
事件中为一个元素挂起很多function。 你怎么能确定那个false
是最后一个呢? 另一方面, preventDefault
一定会阻止元素的默认行为。
我认为
event.preventDefault()
是W3C规定的取消事件的方式。
您可以阅读W3C规范中关于事件取消的内容 。
你也不能在任何情况下使用return false。 当在href属性中给出一个javascript函数时,如果你返回false,那么用户将被redirect到一个写入了假string的页面。
我认为最好的方法是使用preventDefault,因为如果在处理程序中引发了一些exception,那么返回false语句将被忽略,行为会与你想要的相反,所以最好使用event.preventDefault()方法
但如果确定代码不会触发任何exception,那么你可以按照你的意愿去任何方法。
如果你仍然想要返回false,那么你可以把你的整个处理程序代码放在下面的try catch块中
$('a').click(function (e) { try{ your code here......... } catch(e){} return false; });
根据我的经验,我的看法是,使用总是比较好
event.preventDefault()
实际上要停止或阻止提交事件,只要我们要求而不是return false
event.preventDefault()
工作正常。