防止移动 Safari 中 <video> 元素中的 touchmove 事件答案

【问题标题】：Preventing touchmove events in a <video> element in Mobile Safari防止移动 Safari 中 <video> 元素中的 touchmove 事件
【发布时间】：2011-05-11 20:53:53
【问题描述】：

我正在 Mobile Safari 中编写一个带有视频元素的主屏幕网络应用程序。出于可用性原因，我希望在屏幕上滑动不会使页面滚动。我可以使用以下代码成功防止滑动滚动。但是，如果用户在视频元素上滑动，页面就会滚动。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>no scroll</title>
<script type="text/javascript">
window.onload = function(){
    document.addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);
};
</script>
</head>
<body>
<p>anything but the video will be stationary when swiped.</p>
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100">
    <source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>

我已尝试添加代码以防止视频元素吞噬这些事件（插入到 window.onload 函数中）：

var videoEl = document.getElementById('video');
videoEl.addEventListener('touchmove',function(event){
    event.preventDefault();
},false);
videoEl.addEventListener('touchstart',function(event){
   event.preventDefault();
},false);

有解决办法吗？我是否以错误的方式解决问题？

【问题讨论】：

标签： iphone webkit mobile-safari html5-video

【解决方案1】：

我建议在顶部放置一个 shim，即具有更高 z-index 的空白 div 以捕获触摸事件。我现在没有机会测试，但应该很容易尝试。

【讨论】：

啊，对。这让我觉得这个问题已经被回答过一百万次了。我会试一试。
我已经尝试过您的建议，但无济于事。我开始认为我想做的事情是不可能的。这是一个相关的问题：stackoverflow.com/questions/2874353/…
只要视频元素没有启用“控件”属性，我就设法让覆盖的 shim 捕获事件。希望对您有所帮助。