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（原生和模拟器）进行测试。

之后我找到了this blog post with a similar issue。但唯一适用于我的问题的解决方案是以下CSS：

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

但如果我希望搜索取消按钮可见，我就无法使用此解决方法。

此问题还有其他解决方法吗？

几天前我在bugreport.apple.com上发布了这个bug，直到现在还没有苹果的反应。这个错误似乎是在iOS 6和7中，如果它有一天得到修复它会很棒。

如何判断这是webkit还是iOS错误？

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

更新

~~此错误似乎已在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需要双击一个简单的链接元素

更新

更新2

更新3

2 个答案: