JS中事件冒泡

文章来由:某天看到别人写的代码在一个onclick事件后面添加了一个return false;当时看的很奇怪，后来才知道这个说法。

1.事件冒泡的定义(不知道哪里看到的定义)
在一个对象上触发某类事件（比如单击onclick事件），如果没有定义此事件或者这个事件返回了true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

上面定义的解释：如果在里层的点击事件没有在js中进行定义，或者说返回的是true值，那么久会一直执行外层的点击事件，知道有一层的点击事件有定义来执行，或者一直到dom层执行完

2.可能上面说的不够直观，我直接来个例子解释。(js部分是基于jquery写的)

1.1
<form>
    <div id="dOne" onclick="alert('我是x');">
        <div id="dTwo" onclick="alert('我是y')">
            <a id="aThree" href="http://www.baidu.com" onclick="alert('我是z')">666</a>
        </div>
    </div>
</form>

1.1结果

点击“666”连接：
浏览器会依次弹出：我是x,我是y,我是z,然后跳转到百度
所以这就是事件的冒泡了，从里到外。

1.2解决方案

1.1.1

基于jquery的代码:
    <script type="text/javascript">
        $(function(){
              $("#aThree").click(function(event) {
              //阻止了事件冒泡，也阻止了默认行为
                return false;
                }); 
        });
    </script>

1.1.1结果

点击“666”链接
浏览器弹出：我是z，执行完毕

1.1.2

    <script type="text/javascript">
        $(function(){
              $("#aThree").click(function(event) {
                      //阻止了事件冒泡，但不会阻击默认行为
                     event.stopPropagation(); 
                });  
        });
    </script>

1.1.2结果

点击“666”链接
浏览器弹出：我是z，并跳转到百度页面，执行完毕

1.1.3

    <script type="text/javascript">
        $(function(){
               $("#hr_three").click(function(event) {
               //不阻击事件冒泡，但阻击默认行为 
                 event.preventDefault();
                }); 
        });
    </script>

1.1.3结果

点击“666”链接
浏览器弹出：我是z,我是y,我是x，执行完毕不跳转页面。