如何获取EJS循环渲染的元素列表中被用户点击的对应元素？

你可以通过「自定义属性+事件委托」的方式高效实现需求，不需要给每个生成的视频单独绑定事件，性能更好，也能准确拿到点击的视频对象。

步骤1：修改EJS循环渲染逻辑 #

给每个生成的video标签添加自定义属性存储唯一标识，同时加统一的类名方便识别：

<% for(var i=0; i<100; i++) { %>
<!-- 加data-index存储循环索引，也可根据业务加data-video-id等其他自定义属性 -->
<video class="loop-rendered-video" data-index="<%= i %>" controls>
  <source src="assets/video.mp4">
</video>
<% } %>

步骤2：绑定全局点击事件（事件委托实现） #

直接给公共父容器/页面绑定点击事件，通过事件冒泡识别点击的视频元素：

document.addEventListener('click', function(e) {
  // 判断点击的目标是否是我们循环生成的视频元素
  if (e.target.classList.contains('loop-rendered-video')) {
    // 直接获取被点击的视频DOM对象
    const clickedVideo = e.target
    // 拿到该视频对应的循环索引/其他自定义属性
    const videoIndex = clickedVideo.dataset.index
    // 这里写你需要的业务逻辑，比如播放、获取视频时长等
    console.log('被点击的视频索引：', videoIndex, '视频对象：', clickedVideo)
  }
})

可选简化方案（少量元素适用） #

如果你的视频数量不多，也可以直接在渲染时绑定内联事件，直接把当前元素作为参数传入：

<!-- 前端提前定义好全局处理函数 handleVideoClick -->
<% for(var i=0; i<100; i++) { %>
<video onclick="handleVideoClick(this, <%= i %>)" controls>
  <source src="assets/video.mp4">
</video>
<% } %>

对应的处理函数：

function handleVideoClick(videoEl, index) {
  // 直接拿到视频对象和对应索引
  console.log('点击的视频：', videoEl, '索引：', index)
}

注意：如果你的video标签开启了controls属性，点击播放器自带的控制按钮也会触发点击事件，需要特殊过滤的话可以额外判断点击位置的元素类型。

内容的提问来源于stack exchange，提问作者user16421569