如何屏蔽父元素中指定子元素的点击事件？

Question

<div class="p">    <div class="c1">不触发p的点击事件</div>    <div class="c2">触发p的点击事件</div>    <div class="c3">触发p的点击事件</div></div>定义了一个函数监听.p的点击事件，如果点击鼠标时，鼠标位于.p的子元素.c1上，则跳过定义的点击事件。请问该如何实现？

Answer 1

p.addEventListener('click',e => {

    if(e.target.className == 'c1') return false;

    //正常情况下的代码

})

Answer 2

就楼上所说的方法了，最好还是用jquery的子选择器更简单点。

原生如下：

window.onload = function() {

            var p = document.getElementsByClassName("p")[0];

            p.addEventListener('click', function(e) {

                if(e.target.className == 'c1') {

                    return false;

                } else {

                    alert(123);

                }

            })

        }