JS中点击事件冒泡解析

关于Javascript中的点击事件冒泡的问题，很多初学者都处理不好。

什么是点击事件冒泡？

例：

今天我去小明家找他玩。正好小明、小明的爸爸、小明的爷爷在客厅一起看电视。

我对小明说：”咱们出去玩吧“。

小明十分乐意的回答到：”好啊“。

小明的爸爸听到后，说到：”把作业写完后在出去玩“。

小明的爷爷也发话了：”预报有雷阵雨，就别出去玩了“。

我本来只是询问一下小明的意见，结果他爸比和爷爷对我说的话做出的反应影响到了小明接下来的行为。

这次之后，我和小明私下约定好。以后去找他玩的，都会去他房间里讲话，避免他家人听到。

这就叫事件阻止行为，只有天知地知你知我知，避免其他人造成不必要的影响。

废话说了那么多，不知道大家明白了没有。直接上代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>点击事件冒泡处理</title>
    <script type="text/javascript">
        var fun1 = function (e) {
            alert("我是父点击事件");
        }
        var fun2 = function (e) {
            e.stopPropagation();//阻止点击事件向上冒泡
            alert("我是子点击事件");
        }
    </script>
</head>
<body>
    <div onclick="fun1(event)" style="height:100px;background-color:black;color:white;text-align:center;border:1px solid red">
        父节点
        <div onclick="fun2(event)" style="margin-top:20px;border:1px solid red;height:30px">
            子节点
        </div>
    </div>
</body>
</html>

子节点的点击事件会上父一级传递的，就像上述代码中说表明的，在点击事件触发fun2的时候，接下来也会触发fun1。在大部分的逻辑中，我们不是很希望这样。在就需要在点击子节点的时候，中止父节点接下来的行为。

再补充一点比较特殊的点击事件：

如果要取消某些DOM元素单击后的缺省处理函数，比如转到其它页面或是提交表单，为了取消这些缺省实际处理，可以调用e.preventDefault()。