实现点击自身元素而不是子元素触发的js条件

 

如下：点击子元素时候不想触发

<style>

 

    #parent{
        background: pink;width:50%;
    }
    #child{
        background: orange;height:300px;width: 300px;
    }
</style>

 

<div id="grandFather" οnclick="aa('grandFather',event)">
    <div id="parent" οnclick="aa('parent',event)">
        <div id="child" οnclick="aa('child',event)"></div>
    </div>
</div>

<script>
     function aa(val,event) {

          alert(val);

         console.log(event.target,event.currentTarget)

 

     }

 

</script>

如果我们想点击某个元素，只触发该元素的事件，推荐大家一种简单而不常使用的方法：

e.currentTarget   事件对象返回目前触发事件的元素

e.current            返回触发该一系列事件的源头元素

举例： 假如我现在点击child元素，则会冒泡以此触发父元素的事件，这时候aa，会执行三次,以此为：

                 event.target                                 event.currentTarget

child            child                                                 child

parent         child                                                parent

grandFather  child                                             grandFather

 

所以实现只点击元素本身，才会触发元素的事件的简单方法如下：修改aa函数：

 

 

function aa(val,event) {
    if(event.target===event.currentTarget){
        alert(val)
    }

}

 

是不是非常简单。