点击视频上的jquery不起作用

Question

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Firefox控件是整个视频标记

问题

  

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

说明

Firefox有一个播放按钮中心海报，Chrome没有。这是一个明显的指标，表明FF具有覆盖整个代码的controls属性，Chrome不会覆盖整个代码，controls只能在条形图的底部访问。

Firefox视频代码首先解释对其controls属性的点击，因此.vid上注册的点击事件永远不会被触发，或者更有可能触发事件，然后e.stopPropagation()被调用，所以没有别的将通过点击触发。

小结

总结到目前为止：

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

2. Firefox controls会与定位到视频广告代码的所有点击事件进行互动。

解决方案⭐

如果视频代码需要controls，请不要在视频代码上注册click事件。请注册另一个类似的事件：

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(){

它应该有用。