4

应用场景:一组列表,需获取当前触发 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>
))}

结语:反正我目前找到的最好的解决方法,匆匆忙忙下班时间搞个文章记录;不太全面,有些东西一笔过,遇到过这个问题的,一看就能明白,如有不正之处,欢迎指正。


电波马达
1.9k 声望125 粉丝