在Mobile Safari中预防<video>元素中的touchmove事件

我正在Mobile Safari中使用视频元素编写主屏幕Web应用程序。出于可用性原因，我宁愿在屏幕上滑动也不会使页面滚动。我可以使用以下代码成功地防止滚动滚动。但是，如果用户在视频元素上滑动，页面会滚动。在Mobile Safari中预防<video>元素中的touchmove事件

<!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);

对此有一个解决方法吗？我是否以错误的方式解决问题？

来源

2011-05-11 whlteXbread

我建议在顶部放一个垫片，也就是一个带有较高z-index的空白div来捕捉触摸事件。我现在没有机会测试，但应该很容易尝试。

来源

2011-05-12 05:42:41

啊，对。这让我觉得这个问题已经回答了一百万次。我会给它一个镜头。 – whlteXbread 2011-05-12 17:43:00

我试过你的建议没有用。我开始认为我想要做的事是不可能的。这里有一个相关的问题：http://stackoverflow.com/questions/2874353/touch-events-are-not-triggered-on-video-tags-on-safari-for-iphone – whlteXbread 2011-05-12 22:37:13

我设法有一个覆盖的垫片捕获事件，只要视频元素没有启用“控件”属性即可。希望有所帮助。 – Maciek 2011-07-08 17:40:33

在Mobile Safari中预防<video>元素中的touchmove事件

回答

相关问题