JS事件冒泡实例

        近段时间，在开发中遇到需要自定义选择下拉框，在自己尝试实现下拉选择框时，就遇到今天要探讨的js冒泡问题。于是，针对这个问题，本文结合选择下拉框的实现为例，来探讨一下。

        首先看一下什么是事件冒泡 

事件冒泡 ：dom树中的一个元素接收到事件的时候，会将事件传递给他的父级元素，直至window。先来看一下简单的例子：

   <div id="div1">
        父节点
        <div id="div2">
          子节点
        </div>
    </div>

        $(function () {
            $("#div1").click(function () {
                alert("父节点");
            })
            $("#div2").click(function () {
                alert("子节点");
            })
        })

在这个例子中，当点击子div时，会先后弹出“子节点”和“父节点”，也就是说不仅会触发子div的点击事件，同时也会触发父div的点击事件。

  接下来，再来看一下稍微复杂点的，也就是本人遇到下拉选择框实现的问题。

下面是html和js代码：

            <div id="box_color" class="box">
                <div id="fontcolor" class="selected">字体颜色</div>
                <div id="down_color" class="down" style="display:none">
                    <ul class="options">
                        <li>black|黑色</li>
                        <li>blue|蓝色</li>
                        <li>red|红色</li>
                    </ul>
                </div>
            </div>

    $(".selected").each(function () {
        $(this).click(function (e) {
            e.stopPropagation(); //阻止冒泡
            $(this).parent().find(".down").css("display", "block");
            $(this).parent().find("li").unbind("click").click(function (e) {
                $(this).parent().parent().css("display", "none");
                $(this).parent().parent().parent().find(".selected").html($(this).html())
            })
        })
    })

上述代码实现的功能是：点击选择框，弹出下拉项，点击下拉项中的一项，下拉框的值变为选择的内容，然后下拉项隐藏。现在为了更符合用户的使用习惯，我想实现：当弹出下拉项时，用户点击其他空白位置时，下拉项隐藏。

         于是，在js代码中增加了一个document点击事件：

  $(".selected").each(function () {
        $(this).click(function (e) {
            $(this).parent().find(".down").css("display", "block");
            $(this).parent().find("li").unbind("click").click(function (e) {
                $(this).parent().parent().css("display", "none");
                $(this).parent().parent().parent().find(".selected").html($(this).html())
            })
        })
    })
//点击空白处，隐藏下拉项
 document.onclick = function () {
        $(".down").css("display", "none");
    }

然而，将js代码改为上述之后，点击选择框，下拉框竟无法弹出了。经分析，是由于点击事件的冒泡所致。

 现在，我们按照事件冒泡顺序来分析，当点击选择框时，触发选择框的点击事件，此时下拉框弹出。但是点击选择框，事件冒泡向上传递，也就相当于点击了document，此时触发了document的点击事件，下拉项隐藏。由于电脑运算速度较快，所以看起来像是，下拉项从没弹出过。所以为了解决这个问题，就要阻止选择框的点击事件冒泡，将上述代码修改为：

<script>
        $(function () {
            $(".selected").each(function () {
                $(this).click(function (e) {
                    e.stopPropagation(); //阻止冒泡
                    console.log("11");
                    $(this).parent().find(".down").css("display", "block");
                    $(this).parent().find("li").unbind("click").click(function (e) {
                        console.log($(this).html())
                        $(this).parent().parent().css("display", "none");                        $(this).parent().parent().parent().find(".selected").html($(this).html())
                    })
                })
            })
            document.onclick = function () {
                $(".down").css("display", "none");
            }
        })
    </script>

如需要本文的前端下拉选择框的实现源码，可以访问：https://download.csdn.net/download/u010025127/19789165