javascript - iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件?

标签 javascript mobile-safari cordova html5-video

我正在尝试将一些事件附加到我的 iPad 网络应用程序中的 HTML5 视频元素,但它们似乎没有触发?我已经在设备和模拟器中对此进行了测试,并获得了相同的结果。但是,这些事件(至少对于 onclick)在桌面 Safari 中运行良好。我也试过将视频元素换成一个 div,事件是否正常?有没有其他人遇到过这个问题并且有解决方法的想法?

<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <title>Test video swipe</title>
        </head>
        <body>

                <video src='somevid.mp4' id='currentlyPlaying' width='984' height='628' style='background-color:#000;' controls='controls'></video>

                <script>
                        var theVid = document.getElementById("currentlyPlaying");

                                theVid.addEventListener('touchstart', function(e){
                                        e.preventDefault();
                                        console.log("touchstart");
                                }, false);

                                theVid.addEventListener('click', function(e){
                                        e.preventDefault();
                                        console.log("click");
                                }, false);

                                theVid.addEventListener('touchmove', function(e){
                                        console.log("touchmove");
                                }, false);

                                theVid.addEventListener('touchend', function(e){
                                        console.log("touchend");
                                }, false);

                                theVid.addEventListener('touchcancel', function(e){
                                        console.log("touchcancel");
                                }, false);



                </script>
        </body>
</html>

最佳答案

如果您使用 controls 属性,则 iPad 上的视频元素将吞下事件。如果您希望元素响应触摸事件,则必须提供自己的控件。

关于javascript - iPad 上的 HTML5 视频元素不会触发 onclick 或 touchstart 事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3803702/

相关文章:

javascript - 如何检查 document.getElementById 是否给出空结果?

javascript - 使用变换 : scale(1) via Jquery 添加类时变换不动画

javascript - 将函数从 getActiveSheet() 更改为 getSheetByName ("mySheet")

ios - 在 Xcode 中创建 Sencha Touch、Phone Gap 项目

javascript - 从 Javascript 读取 PNG 文件 - 参数不是 blob

javascript - 通过 Ratchet v2.0.2 加载外部 map 脚本

javascript - Razor View 模型绑定(bind)使用javascript函数

javascript - jquery 移动对话框在页面加载后关闭

angular - 如何修复 iPhone 打印的 CSS

html - iOS 浏览器 (Chrome/Safari) 因视频而滚动闪烁