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

前端之家收集整理的这篇文章主要介绍了html – iOS需要双击一个简单的链接元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如果您点击iOS上的元素,浏览器会触发mouSEOver / mousemove事件并呈现:hover样式.如果在此过程中检测到“内容更改”,则不会触发任何点击事件,您必须再次点击即可触发点击事件.这在 developer.apple.com记录.

即使没有使用鼠标事件或悬停样式,网页中也出现了“内容更改”的问题.花了一段时间,但是我能够将网页缩小到一个小的测试用例:

  1. <style>
  2. a:hover { color: red }
  3. foo + * { color: red }
  4. </style>
  5. <a href="about:blank">foo</a>
  6. <input type="search">

在此页面上,您必须在“foo”链接上点击两次才能浏览.用iPad mini和iPhone测试(本机和模拟器).

之后,我发现了this blog post with a similar issue.但唯一适用于我的问题的修复是以下CSS:

  1. input[type=search]::-webkit-search-cancel-button {
  2. display: none;
  3. }

但是如果我想要搜索取消按钮可见,我不能使用此解决方法.

这个问题有其他解决方法吗?

我几天前在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的反应,而不是“按预期的行为”.

解决方法

我将禁用触摸设备的悬停效果作为一般的实践规则.

诀窍是允许可以触摸的设备,但触摸不被用于仍然获得悬停效果.

我会禁用所有悬停效果,除非您使用悬停效果来创建下拉菜单,因为实际需要双重选项卡,但其余的则会适得其反.

我正在使用的是一个简单的脚本,只要触发事件发生,就会在身体上移除一个类.

所以我开始用一个没有接触班的身体

  1. <body class="hoverok">

然后将以下内容添加为javascript,以在第一个touchstart上删除标记

  1. (function () {
  2. function antitouch() {
  3. if (!('addEventListener' in window)) {
  4. return;
  5. }
  6. var bodyElement = document.querySelector('body');
  7. function touchStart () {
  8. document.querySelector('body').classList.remove('hoverok');
  9. bodyElement.removeEventListener('touchstart',touchStart);
  10. }
  11. bodyElement.addEventListener('touchstart',touchStart);
  12. }
  13. if (window.addEventListener) {
  14. window.addEventListener('DOMContentLoaded',antitouch,false);
  15. } else {
  16. window.attachEvent('onload',antitouch);
  17. }
  18. }());

然后最后更改你的css选择器
只有当小组在身上的时候才能匹配.

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

例如.:

  1. .hoverok a:hover {
  2. color:red;
  3. }

猜你在找的HTML相关文章