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