JavaScript阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #dv1 {
            width: 300px;
            height: 300px;
            background-color: red;
        }
        #dv2 {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #dv3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>
<script src="common.js"></script>
<script>
    //事件冒泡:多个标签嵌套,有层次关系,绑定相同的事件,当里面的事件触发,外面的事件自动触发
    //如何阻止事件冒泡:
    //第一种:window.event.cancelBubble = true;IE特有的,谷歌支持,火狐不支持
    //第二种:事件处理参数对象.stopPropagation();谷歌,火狐支持,IE8不支持
    my$("dv1").onclick = function () {
        console.log(this.id);
    };
    my$("dv2").onclick = function () {
        console.log(this.id);
    };
    //事件处理参数对象
    my$("dv3").onclick = function (e) {
        console.log(this.id);
//        window.event.cancelBubble = true;
        e.stopPropagation();
    };
</script>
</body>
</html>

commo.js代码:

/**
 * Created by Administrator on 2018/7/22.
 */
function my$(id) {
    return document.getElementById(id);
}
//设置任意的标签中间的文本内容
function setInnerText(element, text) {
    //判断浏览器是否支持该属性
    if (typeof element.textContent == "undefined") {
        element.innerText = text;
    } else {
        element.textContent = text;
    }
}
//获取任意标签中间的文本内容
function getInnerText(element) {
    if (typeof element.textContent == "undefined") {
        return element.innerText;
    } else {
        return element.textContent;
    }
}
//获取任意一个父级元素的第一个子级元素
function getFirstElementChild(element) {
    if (element.firstElementChild) {//true 支持
        return element.firstElementChild;
    } else {
        var node = element.firstChild;//第一个子节点
        while (node && node.nodeType != 1) {
            node = node.nextSibling;
        }
        return node;
    }
}

//获取任意一个父级元素的最后一个子级元素
function getLastElementChild(element) {
    if (element.lastElementChild) {
        return element.lastElementChild;
    } else {
        var node = element.lastChild;
        while (node && node.nodeType != 1) {
            node = node.previousSibling;
        }
        return node;
    }
}

//为任意元素绑定任意事件
//参数1:任意元素
//参数2:事件类型
//参数3:事件处理函数
function addEventListner (element, type, fn) {
    //判断浏览器是否支持该方法
    if(element.addEventListener) {
        element.addEventListener(type,fn, false);
    }else if(element.attachEvent) {
        element.attachEvent("on" + type, fn);
    }else {
        element["on"+type] = fn;
    }
}

JavaScript阻止事件冒泡

猜你喜欢