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

Question

如果您点击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错误？

报告此错误的正确位置在哪里？

UPDATE

~~此错误似乎在iOS 8中得到修复。使用iPad mini和iPhone（本机和模拟器）进行测试。~~

更新2

在iOS 8中没有完全修复Bug，如果你在大括号之间放置一些CSS，它仍会出现，例如color: red 。 我更新了测试用例以在iOS 8中显示错误。

更新3

这个bug在iOS 9中没有修复，除了“按预期行为”之外，仍然没有来自bugreport.apple.com的反应。

Answer 1

作为一般规则，我会禁用触摸设备的悬停效果。

诀窍是允许可以触摸但不使用触摸的设备仍然可以获得悬停效果。

我会禁用所有悬停效果，除非您使用悬停效果创建下拉菜单，因为那些实际上需要双选项卡，但对于其余部分，它会适得其反。

我正在使用的是一个简单的脚本，只要发生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选择器只匹配类触摸是在身体上。

我没有用你的东西对它进行测试，但它会在a上带走悬停，这应该确保双标签永远不会被触发。

例如。：

.hoverok a:hover {
  color:red;
}

Answer 2

我在悬停时切换2个图像的显示状态时遇到了类似的问题：

.element__color-primary:hover { display: none; }
.element__color-secondary:hover { display: block; }

Android设备工作正常。

使用媒体查询仅在较大的屏幕上应用悬停效果是我实施的快速而简单的修复。 在我的情况下，这样做并没有恶化用户体验。

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

问题描述

UPDATE

更新2

更新3

2 个解决方案

解决方案1
3

解决方案2
-1 2016-04-28 11:10:42

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

问题描述

UPDATE

更新2

更新3

2 个解决方案

解决方案1 3

解决方案2 -1 2016-04-28 11:10:42

解决方案1
3

解决方案2
-1 2016-04-28 11:10:42