Question

我有一个带有视频元素的容器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/

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

0 个答案: