javascript - 点击悬停区域中的链接会在触摸时立即激活

Question

我目前正在构建一个响应式网站，但在悬停时显示内容和按钮链接的框出现问题。在触摸设备上，如果您在链接所在的位置点击处于隐藏状态的框，它会立即激活链接，而不会给用户阅读新内容的机会。如果您点击框内链接周围的任意位置，则会按预期应用悬停状态。

我很确定点击事件是在以触摸开始的悬停/鼠标悬停事件之后触发的，例如touchstart -> mouseover -> click。

我试着围绕这个做了一些研究，但似乎没有太多关于这个主题的内容。有什么好的方法可以防止在单点触摸区域触发点击吗？

https://jsfiddle.net/bvcv018m/4/embedded/result/ .将 Chrome 的设备模拟器用于 fiddle 实际上复制了这一点。

示例 HTML

<div class="box">
    <img src="http://lorempixel.com/250/250" alt="">
    <div class="hidden"> <!-- This is shown on hover -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis reiciendis. Try tapping the following button even in the hidden state. </p>
        <a href="#" class="button">Click This</a> <!-- Tapping this area activates the link immediately -->
    </div>
</div>

我尝试了多种监听 touchstart mouseover click 事件的变体，但无法获得适用于移动设备/平板电脑和桌面的任何可靠内容。

Answer 1

设法通过将 position: relative; 设置为按钮并使用 z-index 值来找到解决方法。

本质上，按钮的初始 z 顺序是 -1，使其不可点击。当点击叠加层以显示时，将显示 z 顺序。唯一的额外一点是 z 索引需要在稍微延迟后出现，因为大多数移动浏览器在 touchstart -> touchend -> mouseover 和 click 之间有(我认为)300 毫秒的延迟。延迟是通过 setTimeout 实现的，但我相信它可以完全通过 CSS 在 z-index 上使用 transition-delay 来完成。