移动Safari：视频元素上的链接（< a>）元素在点击时不起作用 [英] Mobile Safari: link (<a>) element over video element does not work on click
问题描述
我当前的项目是一个html网站，其中包含一个下拉菜单（javascript / jquery）和一个html5视频播放器（仅限视频标签）。
my current project is a html website that contains a dropdown menu (javascript/jquery) and a html5 videoplayer (video-tag only).
点击一个在菜单条目中，下拉子菜单覆盖了videoplayer容器（下拉列表的z-index高于videoplayer）。在Safari和Chrome中，子菜单条目的链接在点击时可以正常工作，但在iPad上的Mobile Safari中他们没有反应。为了减少这个问题，我的最小示例包括一个覆盖视频元素的链接元素。
When clicking on a menu entry, the dropdown submenu overlays the videoplayer container (z-index of dropdown is higher than of videoplayer). In Safari and Chrome the links of the submenu entries work properly on click, but in Mobile Safari on iPad they do not react. To reduce the problem, my minimal example includes a link element that overlays a video element.
<head>
<style>
a {
position: absolute;
display: block;
z-index: 1;
}
video {
position: absolute;
z-index: 0;
}
</style>
</head>
<body >
<a href="http://www.google.de">click me</a>
<video src="" width="640" height="360" preload="none" controls="controls"></video>
</body>
触摸iPad上的链接元素不起作用。任何建议都赞赏如何在iPad上点击链接！
Touching the link element on an iPad does not work. Any advice appreciated how to make the link clickable on iPad!
推荐答案
解释：
html5视频播放器吸收触摸启用控件时的事件。
explanation: the html5 video player absorbs the touch events if controls are enabled.
背景：
菜单在下拉时覆盖视频容器，但菜单项链接无法点击。
background: the menu overlayed the video container when dropped down, but the menu item links were not clickable.
解决方案：
作为解决方法我暂时禁用控件，方法是在菜单下拉时用javascript删除html视频属性controls，然后重新添加控件菜单再次放弃时的属性。
solution: as a workaround i temporarily disable the controls by removing the html video attribute "controls" with javascript when the menu is dropped down, and re-add the "controls" attribute when the menu is dropped up again.
这篇关于移动Safari：视频元素上的链接（< a>）元素在点击时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
