返回列表 >
js 事件委托，如何对嵌套的对象进行事件绑定？
时间: 2020-08-20来源：V2EX
前景提要
起因：客户需要匹配一个量比较大的列表，并且随时都会更新内容，点击还得绑定事件，所以理所当然的使用了 js 的事件托管，但实践中却发现了问题，以下是代码：
html 代码 <body> <ul> <li class="test"> <img src="测试图片.jpg"> <p>测试文字</p> </li> <li class="test"> <img src="测试图片.jpg"> <p>测试文字</p> </li> <li class="test"> <img src="测试图片.jpg"> <p>测试文字</p> </li> </ul> </body>
js 代码 var body = document.querySelector('body'); body.addEventListener('click',function(event){ var event = event || window.event; var tisTag = event.srcElement || event.target; if(tisTag.className == 'test'){ alert('li 被点击了！'); } });
出现的问题： 点击 li 列表后，激活的对象是 p 标签和 img 标签，导致预先编写的针对 li 标签的代码没有反应。有没有办法忽略子元素 p 和 img ？

科技资讯:

科技学院:

科技百科:

科技书籍:

网站大全:

软件大全:

更多数据
全部

IT交流
前沿探索
编程百科
技术问答
热门排行

  • 知析标讯
    【服务号】

  • 前嗅大数据
    【订阅号】

联系方式

  • 022-2345 2937
  • 185 2247 0110（同微信）
  • business@forenose.com
  • 2779623375
  • 前嗅大数据

友情链接