阻止javascript事件冒泡的另一种方式

关于javascript的事件模型可以参考这篇文章：

http://blog.csdn.net/chenmoquan/article/details/10162477

讲的非常全面。

javascript的事件模型有两种：捕获模型和冒泡模型。

捕获模型：事件从document到window到body到以下的节点一级一级从上往下传递；

冒泡模型：事件从最低叶子节点到上级到body到window到对document一级一级从下往上传递，模型图如下：

先看一个例子，需求如下：

点击“提取”按钮，弹出一个密码输入对话框，输入密码，回车进行卡号提取，在输入对话框外面点击则取消该对话框。

这个需求的解决方法是：

1，注册“提取”的click事件处理句柄，弹出密码输入框

2，注册window的click事件处理句柄，隐藏弹出的密码输入框

页面代码如下：

<div style="width: 80px;" class="vcenter">
   <a href="javascript:void(0)" class="fetchaction" >提取</a>
</div>
<div id="enterpasswd" > <div>请输入账户密码：</div> <div><input type="password" name="passwd" style="width: 140px;"/></div></div>

javascript控制代码如下：

$(document).ready(function () {
    //点击提取弹出密码框
    $(".fetchaction").on("click", function () {
        onEnterPasswd(this);
    });
    //密码框外点击隐藏
    $(window).on("click", function () {
        $("#enterpasswd").hide();
    });
});

实际上这段页面的执行效果是，点击“提取”时，并没有弹出密码框，原因是$(".fetchaction").on("click"……执行了之后，事件又冒泡到$(window).on("click",……了，对话框又被隐藏了。所以我们要在$(".fetchaction").on("click",……处理之后，阻止事件冒泡到上级。jquery中阻止冒泡的方式比较简单：

    //点击提取弹出密码框
    $(".fetchaction").on("click", function (e) {
        onEnterPasswd(this);
        e.stopPropagation();
    });

事件处理函数的第一个参数默认就是事件对象，可以调用事件对象e的stopPropagation阻止事件往上级冒泡。其实经过时间还有更加简单的方式可以阻止事件往上级冒泡，就是事件处理函数如果返回false，则这个事件就不会往上冒泡了，如下：

    //点击提取弹出密码框
    $(".fetchaction").on("click", function () {
        onEnterPasswd(this);
        return false;
    });

其实上面的代码还应该加上在密码输入框中点击时也不应该隐藏，所以完整的代码如下：

        $(document).ready(function () {
            //点击提取弹出密码框，不冒泡
            $(".fetchaction").on("click", function () {
                onEnterPasswd(this);
                return false;
            });
            //密码框中点击也不冒泡
            $("#enterpasswd").on("click", function () {
                return false;
            });
            //密码框外点击隐藏
            $(window).on("click", function () {
                $("#enterpasswd").hide();
            });
            //回车提交
            $("input[name='passwd']").keypress(function (e) {
                if (e.which == 13) {
                    onFetchCardNo();
                    $(this).val("");
                }
            });
            //Esc隐藏
            $("input[name='passwd']").keydown(function (e) {
                if (e.which == 27) {
                    var p = $("#enterpasswd");
                    p.hide();
                }
            });
        });

jquery中并不支持事件捕获处理。