aus*_*usi 16 html css mobile-safari touch ios
如果您点击iOS上的元素,浏览器将触发mouseover/mousemove事件并呈现:hover样式.如果在此过程中检测到"内容更改",则不会触发任何点击事件,您必须再次点击才能触发点击事件.这在developer.apple.com上有记录.
即使没有:hover应用任何鼠标事件或样式,我在网页上遇到了检测到"内容更改"的问题.花了一段时间,但我能够将网页缩小到一个小测试用例:
<style>
a:hover { color: red }
foo + * { color: red }
</style>
<a href="about:blank">foo</a>
<input type="search">
在此页面上,您必须在"foo"链接上点击两次才能导航.使用iPad mini和iPhone(原生和模拟器)进行测试.
之后我发现这篇博文有类似的问题.但唯一适用于我的问题的解决方案是以下CSS:
input[type=search]::-webkit-search-cancel-button {
display: none;
}
但如果我希望搜索取消按钮可见,我无法使用此解决方法.
这个问题还有其他解决方法吗？
几天前我在bugreport.apple.com上发布了这个bug,直到现在还没有苹果的反应.这个bug似乎是在iOS 6和7中,如果它有一天得到修复它会很棒.
如何确定这是webkit还是iOS错误？
报告此错误的正确位置在哪里？
此错误似乎在iOS 8中得到修复.使用iPad mini和iPhone(本机和模拟器)进行测试.
在iOS 8中没有完全修复Bug,如果你在大括号之间插入一些CSS,它仍会出现,例如color: red.我更新了测试用例以在iOS 8中显示错误.
这个bug在iOS 9中没有修复,除了"按预期行为"之外,仍然没有来自bugreport.apple.com的反应.
小智 4
作为一般实践规则，我会禁用触摸设备的悬停效果。
诀窍是允许可以触摸但不使用触摸的设备仍然获得悬停效果。
我会禁用所有悬停效果，除非您使用悬停效果来创建下拉菜单，因为这些菜单实际上需要双选项卡，但对于其余效果来说，它会适得其反。
我使用的是一个简单的脚本，每当发生 touchstart 事件时，它就会删除主体上的类。
所以我从一个无接触类的身体开始
<body class="hoverok">
然后将以下内容添加为 javascript，以在第一个 touchstart 上删除该标记：
(function () {
function antitouch() {
if (!('addEventListener' in window)) {
return;
}
var bodyElement = document.querySelector('body');
function touchStart () {
document.querySelector('body').classList.remove('hoverok');
bodyElement.removeEventListener('touchstart', touchStart);
}
bodyElement.addEventListener('touchstart', touchStart);
}
if (window.addEventListener) {
window.addEventListener('DOMContentLoaded', antitouch, false);
} else {
window.attachEvent('onload', antitouch);
}
}());
最后更改你的 css 选择器，使其仅在类 touchok 位于 body 上时才匹配。
我还没有用你的东西测试它，但它会取消 a 上的悬停，这应该确保双选项卡永远不会被触发。
例如。：
.hoverok a:hover {
color:red;
}
| 归档时间： |
|
| 查看次数： |
6350 次 |
| 最近记录： |