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;
});

测试如下：

Click here to load page1

Click here to load page2

点击链接就能加载页面内容到当前页，一切都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();
});

测试修改后的代码：

Click here to load page1

Click here to load page2

如果把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