FireFox中通过JQuery捕获HTML5 Video点击事件的问题

这个问题我之前也碰到过，Firefox对原生video控件的事件处理确实和Chrome有差异，导致你的代码在Firefox里失效。原因很简单：在Firefox中，<video>标签的默认播放控件是浏览器生成的子元素（比如播放按钮、进度条这些），当用户点击这些控件时，事件的target指向的是这些子控件，而不是你带有img-thumbnail类的video元素本身，所以你的classClicked == "img-thumbnail"判断自然就不成立了。

下面给你几个靠谱的解决方案：

方案1：用.closest()判断事件目标是否属于video元素 #

这种方法适合事件委托的场景（比如动态加载视频的情况），通过查找事件目标最近的带有指定类的video元素，来确认是否点击了视频区域：

$(document).ready(function() {
  $("body").click(function(e) {
    // 找到事件目标所属的、带有img-thumbnail类的video元素
    const targetVideo = $(e.target).closest('.img-thumbnail');
    if (targetVideo.length) {
      // 在这里执行你的操作，比如获取视频的data-id
      const videoId = targetVideo.data('id');
      console.log(`点击了ID为${videoId}的视频`);
      // 其他业务逻辑...
    }
  });
});

方案2：直接给video元素绑定click事件 #

如果你的视频都是静态加载的（页面初始化时就存在），直接给.img-thumbnail类的video绑定click事件更简洁，因为事件会从子控件冒泡到video元素上：

$(document).ready(function() {
  $(".img-thumbnail").click(function() {
    const videoId = $(this).data('id');
    console.log(`点击了ID为${videoId}的视频`);
    // 执行你的操作...
  });
});

方案3：监听video的play事件（如果只关心播放动作） #

如果你只是想捕获用户“开始播放视频”的操作，而不是任意点击视频区域，直接监听video的play事件会更准确，这个事件在所有浏览器里的表现都是一致的：

$(document).ready(function() {
  $(".img-thumbnail").on('play', function() {
    const videoId = $(this).data('id');
    console.log(`ID为${videoId}的视频开始播放了`);
  });
});

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