应用场景：一组列表，需获取当前触发 onClick 事件元素上的 data-key ；

就一个事件冒泡导致的问题；
初步没解决方案是给 li 下的所有子元素都加上 data-key
显然这是很很很笨的方法，仅为当时测试用。

实在不行，其他地方也要解决这个问题
就停下脚步

得深挖下，事件捕捉/冒泡的过程（有空补全）

既然是子元素冒泡上来了，就得去子元素下阻止冒泡
想了5秒，子元素下要有100个元素且不是。。。。。

到这里就要另外办法了，看下面的代码：

handleMsglistStar(e){
    console.log(e.currentTarget);  //拿到当前触发 onClick事件的元素      
    e.stopPropagation() //停止事件捕捉
    e.preventDefault() //加上并没什么X用，事件向上冒泡
}@H_404_31@ 
跑一遍，还是不行。。。
去查了一下 JavaScript event对象属性方法
 
 
 
currentTarget 返回其事件监听器触发该事件的元素。
 
 
target 返回触发此事件的元素（事件的目标节点）。
 
 
 
 
 
target 触发事件的元素。尽管事件是绑定在 li 上的，点 div.item-content 触发的就是 div.item-content。
 
 
currentTarget 事件绑定的元素。事件绑定在 li 不管你点谁 触发的总是 li
 
 
解决无法获取到当前触发事件的元素
 
handleMsglistStar(e){
    console.log(e.currentTarget)
    console.log(e.currentTarget.getAttribute('data-key'))
    //这样就能拿到绑定在 li 上的信息了
}@H_404_31@ 
{this.props.textList.map(item => (
    <li data-key={key} onClick={this.props.handleShowInfo}>
        <div className="item-content">
            <div className="item-media"><img src={item.headimgurl} /></div>
            <div className="item-inner"></div>
        </div>
    </li>
))}@H_404_31@ 
 
 
结语：反正我目前找到的最好的解决方法，匆匆忙忙下班时间搞个文章记录；不太全面，有些东西一笔过，遇到过这个问题的，一看就能明白，如有不正之处，欢迎指正。
 
 原文链接：https://www.f2er.com/react/306693.html