如果您点击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; }