如何实现网页元素仅响应桌面端点击跳转，不响应触屏端点击？

问题场景 #

• 页面存在5-25张小图，鼠标悬停时显示放大预览或短视频片段
• 需求：桌面端（鼠标/触控板）点击图片直接跳转，触屏设备（包括带触屏的PC用触屏点击）仅触发预览，不跳转
• 直接用<a>标签包裹元素会导致触屏设备点击直接跳转，跳过预览环节，不符合需求

踩过的坑 #

1. mouseenter状态标记方案：触屏设备点击前会自动触发mouseenter模拟事件，导致标记失效，无法阻止跳转
2. 触屏设备标记方案：带触屏的PC同时支持鼠标和触屏操作，无法区分当前操作类型，逻辑覆盖不全
3. 时间差判断方案：通过记录touchend时间，判断click是否在500ms内来阻止跳转，可行但属于hack式实现，不够严谨
4. 媒体查询检测方案：(pointer: fine)或(hover: none)只能判断设备类型，无法区分同一设备上的不同操作方式

更优雅的实现思路 #

核心是追踪真实的鼠标交互行为，而非依赖设备类型或浏览器模拟事件：

• 只有当用户主动通过鼠标进入元素（触发真实的mouseenter）后点击，才允许跳转
• 触屏操作时直接标记为非鼠标交互，阻止后续模拟的click事件

代码实现 #

const elContent = document.querySelector("#content");
let isFromMouse = false;

// 真实鼠标进入时标记状态
elContent.addEventListener("mouseenter", () => {
  isFromMouse = true;
});

// 鼠标离开后重置标记
elContent.addEventListener("mouseleave", () => {
  isFromMouse = false;
});

// 触屏操作时直接标记为非鼠标交互
elContent.addEventListener("touchend", () => {
  isFromMouse = false;
});

// 点击事件中判断操作来源
elContent.addEventListener("click", (ev) => {
  if (!isFromMouse) {
    ev.preventDefault();
  }
  // 点击后重置状态，避免后续误判
  isFromMouse = false;
});

方案优势 #

• 精准区分真实鼠标操作和触屏模拟的鼠标事件，不会出现误判
• 完美兼容带触屏的PC：鼠标点击正常跳转，触屏点击仅触发预览
• 逻辑清晰，没有依赖浏览器行为的时间差hack，稳定性更高

额外优化 #

配合CSS媒体查询，给触屏设备用户添加操作提示：

@media (hover: none) {
  .image-item {
    border: 2px solid #eee;
    /* 可添加更多触屏友好的样式提示 */
  }
}

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