如果您点击iOS上的元素,浏览器会触发mouSEOver / mousemove事件并呈现：hover样式.如果在此过程中检测到“内容更改”,则不会触发任何点击事件,您必须再次点击即可触发点击事件.这在
developer.apple.com记录.
即使没有使用鼠标事件或悬停样式,网页中也出现了“内容更改”的问题.花了一段时间,但是我能够将网页缩小到一个小的测试用例：
<style>
a:hover { color: red }
foo + * { color: red }
</style>
<a href="about:blank">foo</a>
<input type="search">
在此页面上,您必须在“foo”链接上点击两次才能浏览.用iPad mini和iPhone测试(本机和模拟器).
之后,我发现了this blog post with a similar issue.但唯一适用于我的问题的修复是以下CSS：
input[type=search]::-webkit-search-cancel-button {
display: none;
}
这个问题有其他解决方法吗？
我几天前在bugreport.apple.com上发布了这个bug,直到现在还没有苹果的反应.这个bug似乎在iOS 6和7中,如果它有一天会被修复,那将是很好的.
我如何知道这是一个webkit还是iOS的bug？
报告错误的地方在哪里？
UPDATE
这个bug似乎在iOS 8中修复了.用iPad mini和iPhone测试(本机和模拟器).
更新2
在iOS 8中,Bug并没有完全修复,如果你在大括号之间放置一些CSS,它仍然会出现.红色.我更新了测试用例,以在iOS 8中显示错误.
更新3
在iOS 9中,这个bug并不是固定的,但是仍然没有bugreport.apple.com的反应,而不是“按预期的行为”.
解决方法
我将禁用触摸设备的悬停效果作为一般的实践规则.
诀窍是允许可以触摸的设备,但触摸不被用于仍然获得悬停效果.
我会禁用所有悬停效果,除非您使用悬停效果来创建下拉菜单,因为实际需要双重选项卡,但其余的则会适得其反.
我正在使用的是一个简单的脚本,只要触发事件发生,就会在身体上移除一个类.
所以我开始用一个没有接触班的身体
<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选择器
只有当小组在身上的时候才能匹配.
我没有用你的东西测试它,但它会带走一个悬停,这应该确保双标签永远不会被触发.
例如.：
.hoverok a:hover {
color:red;
}
