html – iOS需要双击一个简单的链接元素_html-js-css

概述如果您点击iOS上的元素,浏览器会触发mouseover / mousemove事件并呈现：hover样式.如果在此过程中检测到“内容更改”,则不会触发任何点击事件,您必须再次点击即可触发点击事件.这在 developer.apple.com记录. 即使没有使用鼠标事件或悬停样式,网页中也出现了“内容更改”的问题.花了一段时间,但是我能够将网页缩小到一个小的测试用例： <style> a: 如果您点击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 >

然后将以下内容添加为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选择器
只有当小组在身上的时候才能匹配.

我没有用你的东西测试它,但它会带走一个悬停,这应该确保双标签永远不会被触发.

例如.：