点击视频上层按钮触发视频意外播放/暂停的问题解决需求

数据老陈

2026-8-11

解决点击按钮触发视频播放/暂停的问题

问题根源

HTML语法错误：你的video标签里controls"多了一个多余的引号，导致浏览器解析DOM时出现异常，直接影响了元素的事件绑定和层级渲染。
事件冒泡：即使按钮设置了更高的z-index，点击事件仍会向上冒泡到video元素，触发其默认的播放/暂停行为。

修复方案

1. 修正HTML结构

先把video标签的语法错误改掉，确保DOM解析正常：

<div class='wrap'>
  <video class='vid' src='ph/video.mp4' controls></video>
  <button class='btn'>CLICK</button>
</div>

2. 绑定按钮事件并阻止冒泡

确保在DOM加载完成后绑定事件，同时阻止按钮的点击事件冒泡到video，避免触发视频的播放/暂停：

$(document).ready(function() {
  $('.btn').on('click', function(e) {
    // 阻止事件向上传递，避免触发video的默认行为
    e.stopPropagation();
    console.log('btn clicked');
  });
});

3. 可选：精准控制视频播放触发条件

如果需要进一步确保只有点击video元素本身时才触发播放/暂停，可以给video添加如下事件处理：

$(document).ready(function() {
  $('.vid').on('click', function(e) {
    // 仅当点击目标是video元素本身时，才切换播放状态
    if (e.target === this) {
      this.paused ? this.play() : this.pause();
    }
  });

  $('.btn').on('click', function(e) {
    e.stopPropagation();
    console.log('btn clicked');
  });
});