子元素点击不能冒泡到父元素

Question

问题描述

给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部分
    <ul class="vertical">
    <li>
      <a href="#">默认展开</a>
      <span class="iconfont">&#xe629;</span>
      <ul>
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
        <li>选项四</li>
      </ul>
    </li>
    <li>
      <a href="#">解决方案</a>
      <span class="iconfont">&#xe629;</span>
      <ul>
        <li>移动模块</li>
        <li>后台模板</li>
        <li>电商平台</li>
      </ul>
    </li>
    <li><a href="#">云市场</a></li>
    <li><a href="#">社区</a></li>
  </ul>

实际情况

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

Answer 1

地址：https://www.cnblogs.com/liuga...
我只是大自然的搬运工
document.querySelector('.vertical').addEventListener('click', function(event) {

            var e = event.target;
            while(e !== this) {
                if(e.tagName.toLowerCase() == 'li') {
                    console.log('li click~');
                    break;
                }
                e = e.parentNode;
            }

            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)

Answer 2

a标签本来就有默认事件的。你这样写的话，a标签没有什么存在的价值（也就是变手型图标），还不如直接去掉、或者直接用css指针事件穿透掉就好。