将触摸事件侦听器附加到Firefox中的视频元素

时间:2019-04-17 12:35:41

标签: javascript jquery firefox

我有一个带有视频元素的容器div。该容器具有触摸事件处理程序,但在Firefox中,它播放/暂停视频并且不会传播,而不是由容器处理触摸事件。我还尝试过将事件侦听器添加到视频本身,但是它的行为方式相同(播放/暂停视频)。

我希望触摸事件可以由我自己的函数来处理,就像在其他浏览器中一样。这可能吗?

这是一个使用jQuery的示例,但是在没有jQuery的情况下其行为相同:

var container = document.getElementById('vid-container');
var vid = document.getElementById('vid');

$(container).bind('touchstart', function() {
  alert('Container touchstart');
});

$(vid).bind('touchstart', function() {
  alert('Vid touchstart');
});
#vid-container {
  background: blue;
  height: 500px;
  width: 500px;
}

#vid {
  height: 250px;
  width: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="vid-container">
  <video id="vid" controls>
    <source src="http://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" />
  </video>
</div>

https://jsfiddle.net/8h1z7Lxm/5/

0 个答案:

没有答案