我目前正在构建一个响应式网站，我遇到的问题是显示内容和悬停按钮链接。在触摸设备上，如果您在隐藏状态下轻触该链接所在的位置，则会立即激活该链接，而不会让用户阅读新内容。如果您点击框内链接的任何位置，则按预期应用悬停状态。
我非常确定点击事件是在之后触发触发的悬停/鼠标悬停事件，如touchstart -> mouseover -> click。
我尝试围绕这个进行一些研究，这个主题似乎没有多少。是否有一种很好的方法可以防止在单个触摸区域触发点击？
https://jsfiddle.net/bvcv018m/4/embedded/result/。使用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事件的变体，但无法获得适用于移动设备/平板电脑和桌面设备的任何功能。
答案 0 :(得分：1)
通过将position: relative;设置为按钮并使用z-index值进行管理来管理解决方法。
基本上，按钮的初始z顺序为-1，使其无法点击。点击叠加层以显示时，会显示z顺序。唯一的额外因素是z指数需要在稍微延迟后启动，因为大多数移动浏览器在touchstart -> touchend -> mouseover和click之间有（我认为）300ms的延迟。延迟是使用setTimeout实现的，但我相信它可以完全通过transition-delay上z-index的CSS完成。
答案 1 :(得分：0)
完全未经测试但移动浏览器使用与桌面浏览器不同的多个点击事件。这可以工作
$('#yourLinkID').one('touchstart', function(e) {
e.preventDefault();
}
另外，我个人的偏好并非在移动优化网站上没有任何“悬停”效果。特别是如果他们也有点击监听器。它根本不适用于大多数浏览器