事件代理中冒泡带来的问题----触发根元素自己的事件_事件捕获导致触发时得到的元素不是我想要的-优快云博客

本文链接：https://blog.youkuaiyun.com/magic__man/article/details/51789839

前面我说了一下事件代理，很方便和高效，但是，例子中回避了一个问题，先看看下面这个事件代理的例子，和之前的是一样的：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css" rel="stylesheet">
        body,ul{
            margin: 0px;
            padding: 0px;
        }
        ul{
            list-style: none;
            width: 750px;
            margin: 0 auto;
            background-color: #5f9ea0;
        }
        li{
            width: 200px;
            height: 200px;
            margin: 20px;
            text-align: center;
            display: inline-block;
            background-color: grey;
            cursor: pointer;
        }
        span{
            display: inline-block;
            width: 100px;
            margin: 10px;
            padding: 20px;
            background-color: #2a4f30;
            color: #ffffff;
            cursor: pointer;
        }
    </style>
</head>
<body>

<ul id="newHouse">
    <li><span>上午</span></li>
    <li><span>中午</span></li>
    <li><span>下午</span></li>
</ul>

</body>
<script type="text/javascript">
    var newHouse = document.getElementById('newHouse');
    newHouse.onclick = function(e){
        var e = e || window.event;
        var myTarget = e.target || e.srcElement;
        if(myTarget.nodeName.toLowerCase() == "span"){
            console.log(myTarget.nodeName+'，这里应该只打印元素span');
        }else if(myTarget.nodeName.toLowerCase() == "li"){
            console.log(myTarget.nodeName+'，这里应该是打印元素li');
        };
    }
</script>
</html>

这里我们将li和span的打印事件代理给了ul，这样是可行的，但前提是ul自身没有点击事件，否则通过冒泡，会触发ul自己的点击事件，有些情况下这是我们不想看到的，看一下实际的例子：

<script type="text/javascript">
    var newHouse = document.getElementById('newHouse');
    newHouse.onclick = function(e){
        var e = e || window.event;
        var myTarget = e.target || e.srcElement;
        if(myTarget.nodeName.toLowerCase() == "span"){
            console.log(myTarget.nodeName+'，这里应该只打印元素span');
        }else if(myTarget.nodeName.toLowerCase() == "li"){
            console.log(myTarget.nodeName+'，这里应该是打印元素li');
        };
    };
    /*下面是ul自己的点击事件*/
    newHouse.addEventListener('click',function(e){
        console.log('触发了ul的点击事件');
    });

</script>

我在原先的js代码下面给ul绑定了一个属于它自己的点击事件，现在来看效果：

我点击了一下绿色背景的span元素，但是控制台打印了两次，一次是事件代理中span元素的打印事件，另一次是ul自身绑定的打印事件，这是事件冒泡产生的结果，那么如何做到点击span或是li的时候，不触发ul自己的事件呢？我在ul自己的事件里面，这样做了一个判断：

newHouse.addEventListener('click',function(e){
        if(e.target == e.currentTarget){
            console.log('我是根元素ul的点击事件');
        }
    });

这样其实仍然是触发了ul的点击事件，但是却阻止了它的执行程序，我想，也许有一种通过阻止冒泡彻底阻止ul的事件的方法，但是我至今也没能做成功，期待高手赐教！