# 通过点击子元素获取得到父元素的值进行操作。
css 直接在css 子元素 加入
li.item > * {
/*
pointer-events: none; */
}
作用:阻止了事件流 ,停顿在li 元素上
作用:阻止了事件流 ,停顿在li 元素上
PS:js 通过事件event 获取子元素上层父元素的元素 (
数组方式遍历出父元素 )
<ul id="container">
<!-- 先循环给原有的4个li绑定click事件 -->
<li class="item">1111111
<div class="title">a</div>
<p class="desc">aa</p>
</li>
<li class="item">222222
<div class="title">b</div>
<p class="desc">bb</p>
</li>
<li class="item">33333
<div class="title">c</div>
<p class="desc">cc</p>
</li>
<li class="item">444444
<div class="title">d</div>
<p class="desc">dd</p>
</li>
</ul>
document.querySelector('#container').addEventListener('click', function (event) {
//父元素向下查找指定子元素
if (event.target.localName === 'li') {
console.log(event.target)
} else {
console.log('parent', this.id)
}
},true)
for (var i = 0, j = document.querySelectorAll('#container > li > *').length; i < j; i++) {
//子元素向上查找指定父元素
document.querySelectorAll('#container > li > *')[i].addEventListener('click', function (e) {
event.path.map((v, i) => {
if (v.className === 'item') {
console.log(v)
}
})
}, false)
}