应用场景:一组列表,需获取当前触发
onClick
事件元素上的data-key
;
就一个事件冒泡导致的问题;
初步没解决方案是给 li
下的所有子元素都加上 data-key
显然这是很很很笨的方法,仅为当时测试用。
实在不行,其他地方也要解决这个问题
就停下脚步
得深挖下,事件捕捉/冒泡的过程(有空补全)
既然是子元素冒泡上来了,就得去子元素下阻止冒泡
想了5秒,子元素下要有100个元素且不是。。。。。
到这里就要另外办法了,看下面的代码:
handleMsglistStar(e){
console.log(e.currentTarget); //拿到当前触发 onClick事件的元素
e.stopPropagation();
e.preventDefault();
}
跑一遍,还是不行。。。
去查了一下 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 上的信息了
}
{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>
))}
结语:反正我目前找到的最好的解决方法,匆匆忙忙下班时间搞个文章记录;不太全面,有些东西一笔过,遇到过这个问题的,一看就能明白,如有不正之处,欢迎指正。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。