在悬停区域点击 link 会在触摸时立即激活

Question

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

我很确定点击事件在 hover/mouseover 以触摸开始的事件之后被触发，例如 touchstart -> mouseover -> click.

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

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

示例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 事件的方法，但无法获得适用于 mobile/tablet 和桌面的任何可靠内容。

Answer 1

完全未经测试，但移动浏览器使用与桌面浏览器不同的多个点击事件。这可能有效

$('#yourLinkID').one('touchstart', function(e) {
    e.preventDefault();
}

此外，我个人的偏好对移动优化网站没有任何 "hover" 影响。特别是如果他们也有点击监听器。它在大多数浏览器上根本不起作用

Answer 2

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

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

在悬停区域点击 link 会在触摸时立即激活

Tapping a link in hovered area is immediately activated on touch

javascript

jquery

css

responsive-design

touch