html a 冒泡点击,子元素点击不能冒泡到父元素

问题描述

给li绑定了click事件，结果点击li里面的a，span标签不会冒泡到父元素li上，只有点击li的其余部分(padding)才会触发点击事件

相关代码

document.querySelector('.vertical').addEventListener('click', function(event) {

console.log(event.target)

var e = event.target;

if (e.nodeName.toLowerCase() == 'li'){

var iconfont = e.querySelector('.iconfont');

if (iconfont) {

if (iconfont.innerHTML == '') {

iconfont.innerHTML = ''

iconfont.nextElementSibling.style.display = 'block';

}else {

iconfont.innerHTML = ''

iconfont.nextElementSibling.style.display = 'none';

}

}

}

}, false)

//html部分

• 默认展开

  

  • 选项一
  • 选项二
  • 选项三
  • 选项四

• 解决方案

  

  • 移动模块
  • 后台模板
  • 电商平台
• 云市场
• 社区

实际情况

开始是点击a,span没有反应，然后再点击靠近li边缘的地方，就可以了，不知道为什么