JS-addEventListener

# 通过点击子元素获取得到父元素的值进行操作。
css  直接在css  子元素 加入
li.item > * {
/* pointer-events: none; */
}
作用:阻止了事件流 ,停顿在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)
}

猜你喜欢

转载自www.cnblogs.com/suyingda/p/10000522.html