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

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 => {&nbsp; &nbsp; if(e.target.className == 'c1') return false;&nbsp; &nbsp; //正常情况下的代码})

Answer 2

就楼上所说的方法了，最好还是用jquery的子选择器更简单点。原生如下：window.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var p = document.getElementsByClassName("p")[0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.addEventListener('click', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(e.target.className == 'c1') {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(123);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; }