Javascript Don'；触摸时不直接显示悬停

我有一个缩略图标题，在悬停时显示项目标题。为了使悬停在触摸设备上工作，我添加了一个脚本，使之成为可能。只是它太灵敏了，听起来很奇怪，但我不希望它在第一次触摸时直接工作，而是在第二次触摸时显示拇指标题，在第三次触摸时打开链接。我试图找到一个例子，dia.tv使用了不同的构建方式，但它的工作方式与我描述的和希望实现的方式类似

HTML

CSS

---

尝试在事件处理程序中使用触摸计数器，并在第一次和第二次触摸时返回

false

。返回

false

时，浏览器不会跟随链接。大概是这样的：

var thumb=document.querySelector（'.grid thumb'）；
var计数；
thumb.ontouchstart=处理程序；
thumb.onclick=处理程序；
函数处理程序（）{
如果（！计数）{
console.log（“第一次触摸”）；
计数=1；
返回false；
}否则如果（计数===1）{
console.log（“第二次触摸”）；
thumb.querySelector（'.thumb caption'）.classList.add（'active'）；
计数=2；
返回false；
}
console.log（“第三次触摸”）；
window.location=thumb.querySelector（'a'）.href；
}

.grid thumb{
显示：内联块；
位置：相对位置；
}
.栅格拇指img{
宽度：200px；
}
.拇指标题{
背景：黑色；
颜色：白色；
左：0；
不透明度：0；
填充：2px05px；
位置：绝对位置；
文本对齐：居中；
排名：0；
过渡时间：300ms；
宽度：100%；
}
.thumb-caption.active{
不透明度：1；
}

不确定，但要想打开某个页面，用户可能很难抓住某个按钮两次。。。如果我遇到一个在触摸时显示文本的对象，我希望文本在第二次触摸时消失，但我不希望页面打开。您最好在

.thumb caption

中使用单独的按钮或链接。。第一次触摸（或聚焦/悬停）将显示标题，触摸标题中的链接/按钮将打开一个页面。你能看到他们以不同的方式构建它的类似行为吗？我不需要使它比需要的更复杂。这个悬停标题工作得很好，只是想知道我是否能实现该行为耶。。它们具有悬停/焦点以显示标题，并单击以打开页面。我不知道触摸是否能做到这一点。。是的，我在没有手机或平板电脑模式时也有同样的行为，但即使如此，他们在触摸屏上也有同样的行为。你说得对！我对函数做了一些更改，现在它可以正确地处理TouchStart上的

ontouchstart

。我正在阅读这篇文章，这篇文章是否更适合我的编码工作流程：

<div class="grid-thumb">
<a href="/work/test">
    <img
    src="data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 3508 2480'%2F%3E"
    data-src="/images/test_thumb.jpg"
    class="lazyload"
    alt="">
<div class="thumb-caption">Project title</div>
</a>
</div>

$(document).ready(function() {
$('body').bind('touchstart', function() {});
});

.thumb-caption {
  background-color: transparent;
  opacity: 0;
  position: absolute;
  text-align: center;
  padding: 20px;
  width: 90%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  z-index: 4;
 }

.grid-container a:hover img {
  opacity: 0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
 }

.grid-container a:hover .thumb-caption {
  opacity: 1;
 -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
 }