在视频上单击 jquery 不起作用

Question

当我尝试在 Friefox 中使用 js 单击视频并在控制台中显示视频的 ID 时，它不起作用。为什么？

$('.videoclass').click(function() {
  console.log(this);
  var id = $(this).attr("id");
  console.log(id);
})

<video controls="" id="ui-id-1" class="videoclass" style="position: absolute; top: 118px; left: 61px;" width="320" height="240">    <source id="videoavantuuid" src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> </video>

Answer 1

Firefox 控件是整个视频标签

---

问题

“当我尝试在 Friefox Firefox 中使用 js 点击视频并在控制台中显示视频的 id 时，它不起作用。为什么？”

---

说明

Firefox 有一个播放按钮中心海报，而 Chrome 没有。这是一个明显的迹象，表明 FF 具有覆盖整个标签的 controls 属性，而 Chrome 没有，它的 controls 只能在栏所在的底部访问。

Firefox 视频标签首先解释对它的controls 属性的点击，因此在.vid 上注册的点击事件永远不会被触发，或者更有可能是触发事件然后e.stopPropagation() 被调用，因此点击不会触发任何其他事件.

---

回顾

总结一下：

1. Firefox 视频标签行为：通过播放/暂停响应点击事件，但不触发其他回调。

2. Firefox controls 与指向视频标签的所有点击事件交互。

---

解决方案⭐

如果您需要在视频标签上使用controls，则不要在视频标签上注册点击事件。注册一个替代但类似的事件：

mousedown、focus、contextmenu等

---

演示

使用 Firefox 查看演示：

• 有 3 个视频标签：

   #ID      [控件]      事件             Firefox v.60.0.2上的结果

#vid0 ---- true ------ click ------- -- 播放视频/不运行回调

#vid1 --- false ------ click -------- - 不播放视频/运行回调

#vid2 ---- true ------ focus ------- -- 播放视频/运行回调⭐

$('.vid').on("click", identify);

$('.ff').on('focus', identify); //⭐

function identify(e) {
  var eventcurrentTarget = e.currentTarget.id;
  var eventTarget = e.target.id;
  var thisId = this.id;
  console.log({
    eventcurrentTarget,
    eventTarget,
    thisId
  });
}

figure {
  width: 320px;
  margin: 0 auto 20px 0
}

figcaption {
  font-size: 32px
}

.as-console-wrapper {
  margin-left: 325px;
  width: 40%;
  min-height: 96%
}

.as-console-row:after {
  display: none !important
}

<figure>
  <figcaption>#vid0</figcaption>
  <video id="vid0" class="vid" width="320" height="240" controls>   
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>

<figure>
  <figcaption>#vid1</figcaption>
  <video id="vid1" class="vid" width="320" height="240">
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>

<figure>
  <figcaption>#vid2 ⭐</figcaption>
  <video id="vid2" class="ff" width="320" height="240" controls>   
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> 
</video>
</figure>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

更改下面的代码

$('.videoclass').click(function() {

到

$(document).on('click', '.videoclass', function(){

它应该可以工作。