详解javascript如何阻止冒泡事件及阻止默认事件

- - 一、事件冒泡
  - 二、默认行为

在说事件冒泡之前，我们先说说事件对象（Event）

Event

1、在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）

2、所有浏览器都支持Event对象，但支持方式不同

3、IE中的事件对象：window.event

一、事件冒泡

什么是事件冒泡

即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点

所有浏览器都支持事件冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>事件冒泡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    .one{
        width:400px;
        height:100px;
        border:1px solid #333;
    }
    .two{
        height:35px;
        line-height:35px;
        padding-left:15px;
        border:1px solid red;
    }
    .three{
        padding:10px;
        background-color: green;
        border:1px solid #999;
        cursor:pointer;
    }
</style>
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(function(){
        $(".one").click(function(event) {
            alert($(this).text());
        });
        $(".two").click(function(event) {
            alert($(this).text());
        });
        $(".three").click(function(event) {
            alert($(this).text());
        });
    });
</script>
</head>
<body>
    <div class="one">
        我是one(div)
        <p class="two">
            我是two（p）
            <span class="three">我是three（span）</span>
        </p>
    </div>
</body>
</html>

当在span、p、div元素上各绑定一个click事件，当单击span元素时，会依次触发三个事件，即span、p、div元素上的click事件，这就是事件冒泡，按照DOM层次结构像水泡一样不断向上直至顶端

阻止事件冒泡

DOM中提供stopPropagation()方法，但IE不支持，使用event 对象直接在事件函数中调用就行

IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用

阻止冒泡函数

function stopPropagation(e) {
    e = e || window.event;
    if(e.stopPropagation) { //W3C 阻止冒泡方法
        e.stopPropagation();
    } else {
        e.cancelBubble = true; //IE 阻止冒泡方法
    }
}
document.getElementById('need_hide').onclick = function(e) {
    stopPropagation(e);
}

jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

二、默认行为

什么是默认行为
网页元素，都有自己的默认行为，例如，单击超链接会跳转…

阻止默认行为

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行

IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用

阻止默认行为函数

function preventDefaultAction(e) {
    e = e || window.event;
    if(e.preventDefault) { //W3C方法
        e.preventDefault();
    }else {                //IE方法
        e.returnValue = false;
    }
}

jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用即可，即

event.preventDefault()

如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。
这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

阻止事件冒泡和默认行为综合实例
可自己逐步调试，查看效果，加深印象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>阻止事件冒泡和默认行为</title>
    </head>
    <style type="text/css">
        .one {
            width: 200px;
            height: 200px;
            background: navajowhite;
        }
        .two {
            height: 40px;
            border: 1px solid red;
            background: white;
            line-height: 40px;
        }
        .three {
            cursor: pointer;
            /*padding: 10px;*/
            background: red;
        }
        .defauleAction {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            line-height: 100px;
        }
        .four {
            width: 200px;
            height: 200px;
            background: navajowhite;
            margin-top: 20px;
        }
        .five {
            height: 40px;
            border: 1px solid red;
            background: white;
            line-height: 40px;
        }
        .six {
            cursor: pointer;
            /*padding: 10px;*/
            background: red;
    </style>
    <body>
        <div class="one">我是最外层
            <p class="two">我是第二层
                <span class="three">我是最里层</span>
            </p>
        </div>
        <!--阻止链接自动跳转的默认行为-->
        <div class="defaultAction">
            <a href="https://blog.csdn.net/qq_36595013">我的博客主页</a>
        </div>
        <!--同时阻止冒泡事件和默认行为-->
        <div class="four">我是最外层
            <p class="five">我是第二层
                <span class="six"><a href="https://blog.csdn.net/qq_36595013">我是最里层</a></span>
            </p>
        </div>
    </body>
    <script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".one").click(function(e) {
                alert($(this).text());
            });
            $(".two").click(function(e) {
                preventPropagation(e);
                alert($(this).text());
            });
            $(".three").click(function(e) {
                /*一、先在最里层添加进阻止事件冒泡函数，再查看效果
                 *发现点击中间层的时候还是会冒泡到最外层
                 * 然后再中间层加入阻止函数，再查看效果
                 */ 
                preventPropagation(e);
                alert($(this).text());
            });

            //阻止默认单击链接跳转行为
            $(".defaultAction>a").click(function(e) {
                preventDefaultAction(e);
                alert("链接不跳转了吧！");
            });

            //阻止事件冒泡函数
            function preventPropagation(e) {
                e = e||window.event;
                if(e.stopPropagation) { //W3C方法
                    e.stopPropagation();
                }else {                 //IE方法
                    e.cancelBubble = true;
                }
            }
            //阻止默认行为函数
            function preventDefaultAction(e) {
                e = e || window.event;
                if(e.preventDefault) { //W3C方法
                    e.preventDefault();
                }else {                //IE方法
                    e.returnValue = false;
                }
            }

            //同时阻止默认行为和事件冒泡
            $(".six").click(function() {
                alert("点我之后既不向上冒泡又不跳转到默认的链接");
                //要想同时阻止默认行为和事件冒泡，只需要返回return false就可以了
                return false;
            });
            $(".five").click(function(e) {
                preventPropagation(e);
                alert("我是中间层");
            });
            $(".four").click(function() {
                alert("我是最外层");
            });

        });
    </script>
</html>