触屏设备缩略图交互优化：二次触显标题三次触开链接

我帮你调整了代码，实现了首次触摸无效果，第二次触摸显示标题，第三次触摸打开链接的交互，和你提到的网站逻辑完全匹配。下面是完整的代码和细节说明：

1. HTML 修改 #

给每个缩略图容器添加自定义属性data-touch-count，用来跟踪触摸次数：

<div class="grid-thumb" data-touch-count="0">
  <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>

2. CSS 调整 #

新增.active类专门控制触屏下的标题显示，同时保留桌面端原有的hover效果：

.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;
  transition: opacity 0.2s;
}

/* 桌面端hover效果保留 */
.grid-container a:hover img {
  opacity: 0;
  transition: opacity 0.2s;
}
.grid-container a:hover .thumb-caption {
  opacity: 1;
}

/* 触屏端激活状态样式 */
.grid-thumb.active a img {
  opacity: 0;
}
.grid-thumb.active .thumb-caption {
  opacity: 1;
}

3. JavaScript 核心交互逻辑 #

通过事件委托监听触屏事件，根据触摸次数执行对应操作：

$(document).ready(function() {
  // 监听触屏开始事件，委托到.grid-thumb容器
  $('.grid-container').on('touchstart', '.grid-thumb', function(e) {
    e.preventDefault(); // 阻止默认触摸行为，避免误触发hover效果
    const $thumb = $(this);
    let touchCount = parseInt($thumb.data('touch-count')) || 0;

    touchCount++;
    $thumb.data('touch-count', touchCount);

    switch(touchCount) {
      case 1:
        // 第一次触摸：仅计数，不做任何视觉反馈
        break;
      case 2:
        // 第二次触摸：添加active类，显示标题、隐藏图片
        $thumb.addClass('active');
        break;
      case 3:
        // 第三次触摸：重置计数，移除激活状态，跳转链接
        $thumb.data('touch-count', 0).removeClass('active');
        window.location.href = $thumb.find('a').attr('href');
        break;
    }
  });

  // 兼容处理：触屏设备上避免点击事件误触发跳转
  $('.grid-thumb a').on('click', function(e) {
    if ('ontouchstart' in window) {
      const touchCount = parseInt($(this).closest('.grid-thumb').data('touch-count')) || 0;
      if (touchCount !== 3) {
        e.preventDefault();
      }
    }
  });
});

交互逻辑说明： #

• 每个缩略图通过data-touch-count记录触摸次数，初始值为0
• 第一次触摸：仅增加计数，不触发任何视觉变化
• 第二次触摸：给容器添加active类，触发CSS动画显示标题、隐藏图片
• 第三次触摸：重置计数并移除激活状态，同时跳转目标链接
• 桌面端保留原有的hover交互，不影响正常使用

这样就完美实现了你想要的触屏交互效果啦！

内容的提问来源于stack exchange，提问作者KP83