在jQuery代码中,我们常见用return false来阻止浏览器的默认行为。例如点击链接,浏览器默认打开一个新窗口/标签,为了阻止浏览器的默认行为,我们往往这样操作:
$("a.toggle").click(function() {
$("#mydiv").toggle();
return false;
});
这段代码的作用是通过点击toggle来隐藏或显示#mydiv,并阻止浏览器继续访问href指定链接。测试如下:
点击上一行的toggle,这段文字将被显示或隐藏。
return false达到了我们想要的目的,但这并不是阻止浏览器执行默认行为的正确方法。调用return false,它实际完成了3件事:
- event.preventDefault()
- event.stopPropagation()
- 停止回调函数执行并立即返回。
我们真正的目的是event.preventDefault(),后两者可不是我们想要的。JavaScript事件有两种,一种称为事件冒泡(event bubbling),一种称为事件捕捉(event capturing)。事件冒泡指事件在初始DOM上触发,通过DOM树往上在每一级父元素上触发;当事件向下冒泡时,我们则称之为事件捕获。
因为return false多做了两件事,由此为代码埋下隐患。下面有一个简单的例子,点击一个链接,加载新的页面内容到当前页面:
<div class="post">
<a href="/js/loadp1.txt">Click here to load page1</a>
<div class="content">
</div>
</div>
<div class="post">
<a href="/js/loadp2.txt">Click here to load page2</a>
<div class="content">
</div>
</div>
$("div.post a").click(function() {
var href = $(this).attr("href");
$(this).next().load(href);
return false;
});
测试如下:
点击链接就能加载页面内容到当前页,一切都OK。现在我们想要加一个新功能,例如论坛帖子的浏览,只有当前点击的帖子内容才会显示,其他帖子都隐藏。为此我们需要为div.post加一个click()事件处理:
$("div.post").click(function(){
$("div.post .content").hide(); // hide all content
$(this).children(".content").show(); // show this one
});
添加完这段代码后,我们发现它不生效,缘故是因为$("div.post a").click(function() { return false; });
,由于return false执行了event.stopPropagation(),因此事件不能冒泡到上一级DOM,即$("div.post").click()
不会被事件触发。要达成我们的任务,应该把return false替换为event.preventDefault():
$("div.post a").click(function(e) {
var href = $(this).attr("href");
$(this).next().load(href);
e.preventDefault();
});
测试修改后的代码:
如果把return false和live/delegate事件混用,情况就更糟糕了:
$("a").click(function(){
// do something
return false;
});
$("a").live("click", function(){
// this won't fire
});
如果确实需要阻止事件冒泡,也应该显式地调用:
$("div.post").click(function(){
// do something
});
$("div.post a").click(function(e){
// 浏览器跳转到新页面(默认行为)
// 但阻止事件冒泡,即不会执行$("div.post").click()
e.stopPropagation();
});
event.stopPropagation()用于阻止事件冒泡,jQuery中还有另一个函数:event.stopImmediatePropagation(),它用于阻止一个事件的继续执行,即使当前对象上还绑定了其他处理函数:
$("div a").click(function(){
// do something
});
$("div a").click(function(e){
// stop immediate propagation
e.stopImmediatePropagation();
});
$("div a").click(function(){
// never fires
});
$("div a").click(function(){
// never fires
});
最后结论是:理解return false,尽量避免使用它,请用event.preventDefault()替代return false。
参考
此篇笔记来自jQuery事件处理:别再乱用"return false"了,它的原文又来自Douglas Neiner的jQuery Events: Stop (Mis)Using Return False。
原文地址:http://www.berlinix.com/js/jquery-return-false.php