ul li 冒泡事件

Question

有这样的代码:

<ul onClick=event>
    <li data-value="something">
        <span>title</span>
        <span>data</span>
        <span>data</span>
    </li>
    <li data-value="something">
        <span>data</span>
        <span>data</span>
        <span>data</span>
    </li>
    <li data-value="something"></li>
    <li data-value="something"></li>
</ul>
function event(e){
    console.log(e.target.getAttribute("data-value"));
}

想每点击一行就获取当行的data-value的值，但是e并不代表li，这样怎么处理？

Answer 1

   function  event(e){
               if(e.target.tagName=='LI'){
                console.log(e.target.getAttribute("data-value"));
               }
            }

function  event(e){
              var target = e.target;            
                while(target.nodeType === 1&&target.tagName!=='LI'){
                    target = target.parentNode
                }
                console.log(target.getAttribute("data-value"));
            }

Answer 2

// 需要先做一层判断，是不是li标签
function event(e){
   if(e.target.tagName.toLowerCase() === 'li'){
    console.log(e.target.getAttribute("data-value"));
   }
}

Answer 3

可以向上冒泡找到对应的li

function event(e){
    var target = e.target;
    while(target.nodeType === 3 || target.tagName.toLowerCase() !== 'li' && target !== this){
        target = target.parentNode;
    }
    if(target !== this) console.log(target.getAttribute("data-value"));
}