首页 » JavaScript » jQuery return false

jQuery return false

在jQuery代码中,我们常见用return false来阻止浏览器的默认行为。例如点击链接,浏览器默认打开一个新窗口/标签,为了阻止浏览器的默认行为,我们往往这样操作:

$("a.toggle").click(function() {
    $("#mydiv").toggle();
    return false;
});

这段代码的作用是通过点击toggle来隐藏或显示#mydiv,并阻止浏览器继续访问href指定链接。测试如下:

click toggle
点击上一行的toggle,这段文字将被显示或隐藏。

return false达到了我们想要的目的,但这并不是阻止浏览器执行默认行为的正确方法。调用return false,它实际完成了3件事:

  1. event.preventDefault()
  2. event.stopPropagation()
  3. 停止回调函数执行并立即返回。

我们真正的目的是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

分享

0