为什么用 display 切换锚点的子元素会导致双击，而用 opacity 切换则不会？

Question

为什么在锚点的子元素上切换 display 和 opacity 会对 iOS 设备上的触摸事件产生不同的影响？

我有一个导航菜单，其中每个项目都包含一个图像和一小段文本。

每个图像都有一个 :hover 状态，该状态使用相同的共享叠加图像。
如果 :hover 伪 class 设置叠加图像的 display 值，iOS 设备上的用户必须点击 link两次
如果 :hover 伪 class 设置叠加图像的 opacity 值，iOS 设备上的用户不必须点击 link 两次。
在这两种情况下，覆盖图像覆盖整个基础图像还是较小的插入覆盖都没有关系。
在这两种情况下，包括 :active 和 :focus 伪 classes 不会改变行为。

我知道我可以删除触摸设备的 :hover 规则和 JavaScript。我想知道是否有人知道 为什么 display 和 opacity 之间存在差异。

a {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 150px;
}

a img.overlay {
  display: block;
  left: 0;
  position: absolute;
  top: 0;
}

a.overlay-display img.overlay {
  display: none;
}

a.overlay-display:hover img.overlay {
  display: block;
}

a.overlay-opacity img.overlay {
  opacity: 0;
}
    
a.overlay-opacity:hover img.overlay {
  opacity: 1;
}

<p>
  Set overlay display:
</p>

<a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank">
  <img class="overlay" src="http://placehold.it/150x150/ff0000">
  <img src="http://placehold.it/150x150"> link text
</a>

<a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150">
  <img class="overlay" src="http://placehold.it/150x150/ff0000"> link text
</a>

<a class="overlay-display overlay-display-first" href="http://www.google.com" target="_blank">
  <img class="overlay" src="http://placehold.it/50x50/ff0000">
  <img src="http://placehold.it/150x150"> link text
</a>

<a class="overlay-display overlay-display-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150">
  <img class="overlay" src="http://placehold.it/50x50/ff0000"> link text
</a>

<p>
  Set overlay opacity:
</p>

<a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank">
  <img class="overlay" src="http://placehold.it/150x150/ff0000">
  <img src="http://placehold.it/150x150"> link text
</a>

<a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150">
  <img class="overlay" src="http://placehold.it/150x150/ff0000"> link text
</a>

<a class="overlay-opacity overlay-opacity-first" href="http://www.google.com" target="_blank">
  <img class="overlay" src="http://placehold.it/50x50/ff0000">
  <img src="http://placehold.it/150x150"> link text
</a>

<a class="overlay-opacity overlay-opacity-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150">
  <img class="overlay" src="http://placehold.it/50x50/ff0000"> link text
</a>

此外，切换内联元素或块元素似乎并不重要。在此片段中，我在锚点内切换 span。

a {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 150px;
}

a.text-display span.overlay {
  display: none;
}

a.text-display:hover span.overlay {
  display: inline;
}

a.text-opacity span.overlay {
  opacity: 0;
}

a.text-opacity:hover span.overlay {
  opacity: 1;
}

<p>
  Set text display:
</p>

<a class="text-display text-display-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150"> link text
  <span class="overlay">some other text</span>
</a>

<p>
  Set text opacity:
</p>

<a class="text-opacity text-opacity-last" href="http://www.google.com" target="_blank">
  <img src="http://placehold.it/150x150"> link text
  <span class="overlay">some other text</span>
</a>

根据 iOS 开发者库文档 One-Finger Events：

Mouse events are delivered in the same order you'd expect in other web browsers illustrated in Figure 6-4. If the user taps a nonclickable element, no events are generated. If the user taps a clickable element, events arrive in this order: mouseover, mousemove, mousedown, mouseup, and click. The mouseout event occurs only if the user taps on another clickable item. Also, if the contents of the page changes on the mousemove event, no subsequent events in the sequence are sent. This behavior allows the user to tap in the new content.

问题是不清楚什么是 内容更改。

Answer 1

设置display:none从文档流中删除元素；设置 display:block（或 display:inline）会将其放回文档流中，这将是一种类似于即时创建和添加新元素的内容更改。

当您更改不透明度时，元素始终在文档流中，只是不可见。

尝试使用 display:hidden 而不是 display:block。如果我是对的，display:hidden 也不会对双击造成任何麻烦。使用 "hidden" 不会从文档流中删除元素，这就是为什么当对象不可见时会有一个空白 space 相当于隐藏对象的大小。

https://www.w3.org/TR/CSS2/visuren.html#display-prop

为什么用 display 切换锚点的子元素会导致双击，而用 opacity 切换则不会？

Why does toggling an anchor's child element with display cause a double tap, while toggling with opacity does not?

html

css

mobile-safari

touch

ios