多视频与Modal通用点击事件实现方案咨询

原代码依赖唯一ID绑定元素，仅支持单个视频场景。以下是适配任意数量视频的通用实现方案：

HTML 复用结构 #

每个视频模块采用相同模板，仅需修改视频源即可快速新增：

<!-- 视频模块示例1 -->
<div class="video-modal-container">
  <button class="play-btn btn">播放视频1</button>
  <div class="video-modal modal">
    <div class="modal-content" style="max-width: 100%;">
      <span class="close-modal close">
        <p class="btn" onclick="pauseall()">关闭</p>
      </span>
      <video class="modal-video video-js vjs-default-skin video_size" controls preload="none" data-setup='{}'>
        <source src="media/video1.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</div>

<!-- 视频模块示例2 -->
<div class="video-modal-container">
  <button class="play-btn btn">播放视频2</button>
  <div class="video-modal modal">
    <div class="modal-content" style="max-width: 100%;">
      <span class="close-modal close">
        <p class="btn" onclick="pauseall()">关闭</p>
      </span>
      <video class="modal-video video-js vjs-default-skin video_size" controls preload="none" data-setup='{}'>
        <source src="media/video2.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</div>

<!-- 重复上述结构添加更多视频 -->

JavaScript 通用逻辑 #

通过事件委托实现批量元素控制，无需为每个视频单独绑定事件：

// 全局监听点击事件，统一处理所有交互
document.addEventListener('click', function(e) {
  // 处理播放按钮点击
  if (e.target.closest('.play-btn')) {
    e.preventDefault();
    const container = e.target.closest('.video-modal-container');
    const modal = container.querySelector('.video-modal');
    const video = container.querySelector('.modal-video');
    
    modal.style.display = 'block';
    video.play();
  }

  // 处理关闭按钮点击
  if (e.target.closest('.close-modal')) {
    e.preventDefault();
    const modal = e.target.closest('.video-modal');
    const video = modal.querySelector('.modal-video');
    
    modal.style.display = 'none';
    video.pause();
  }

  // 处理Modal背景点击关闭
  if (e.target.classList.contains('video-modal')) {
    const video = e.target.querySelector('.modal-video');
    
    e.target.style.display = 'none';
    video.pause();
  }
});

// 全局暂停所有视频（对应原代码的pauseall方法）
function pauseall() {
  document.querySelectorAll('.modal-video').forEach(video => {
    video.pause();
    const modal = video.closest('.video-modal');
    if (modal) modal.style.display = 'none';
  });
}

核心优化点 #

• 类名替代唯一ID：用统一类名（如play-btn、video-modal）实现结构复用，避免ID冲突
• 事件委托减少内存占用：仅绑定一次全局点击事件，动态匹配触发元素，适配任意数量视频
• DOM关联遍历：通过closest()和querySelector()确保每个按钮仅控制所属容器内的视频和Modal
• 模块化封装：每个视频的按钮、Modal、视频元素封装在同一容器内，结构清晰易维护

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