为什么切换锚点的子元素与显示导致双击，而切换不透明度不？

Question

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

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

• 每张图片都有:hover状态，使用相同的共享叠加图片。

• 如果:hover伪类设置了叠加图片的display值，则iOS设备上的用户必须点击该链接两次。

• 如果:hover伪类设置了叠加图片的opacity值，则iOS设备上的用户不必须点击该链接两次。

• 在这两种情况下，叠加图像是覆盖整个基本图像还是较小的嵌入叠加层无关紧要。

• 在这两种情况下，包括:active和:focus伪类都不会改变行为。

我知道我可以使用JavaScript删除触摸设备的:hover规则。我想知道是否有人知道为什么 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>

根据One-Finger Events的iOS开发人员库文档：

  

鼠标事件的传递顺序与您在其他网络中的预期顺序相同   浏览器如图6-4所示。如果用户点击不可点击   元素，不生成任何事件。如果用户点击可点击的   元素，事件按此顺序到达：mouseover，mousemove，mousedown，   mouseup，然后单击。只有在用户点击时才会发生mouseout事件   另一个可点击的项目。此外，如果页面的内容发生变化   mousemove事件，不会发送序列中的后续事件。   此行为允许用户点击新内容。

问题在于，不清楚内容更改的内容。

Answer 1

设置display：none从文档流中删除元素;设置显示：块（或显示：内联）将把它放回到文档流中，这将是一个内容更改，类似于动态创建和添加新元素。

当你改变不透明度时，元素总是在文档流中，只是不可见。

尝试使用display：hidden而不是display：block。如果我是对的，显示：隐藏也不会给你带来双击的任何麻烦。使用“隐藏”不会从文档流中删除元素，这就是为什么当对象不可见时，有一个空白空间等于隐藏对象的大小。

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