如何让 JavaScript 的点击事件在触摸屏设备上正常工作-js教程-PHP中文网

如何让 JavaScript 的点击事件在触摸屏设备上正常工作

本文讲解如何修复 javascript 中 click 事件在触屏设备（如手机、平板）上失效的问题，通过正确绑定 touchend 事件并阻止默认行为，实现跨设备兼容的复制功能。

本文讲解如何修复 javascript 中 click 事件在触屏设备（如手机、平板）上失效的问题，通过正确绑定 touchend 事件并阻止默认行为，实现跨设备兼容的复制功能。

在 Web 开发中，仅依赖 click 事件会导致触摸设备（尤其是 iOS Safari 和部分 Android 浏览器）响应迟钝甚至完全无反应——这是因为触摸交互存在约 300ms 的延迟（用于双击缩放判断），且 touchstart 触发过早（手指刚接触即触发，易误触），而 click 在触屏上并非原生可靠事件。

✅ 正确做法是：同时监听 click 和 touchend，并在 touchend 回调中调用 event.preventDefault()，既消除 300ms 延迟，又避免滚动干扰，还能保持桌面端兼容性。

以下是优化后的完整代码示例：

sc-java-to-ts-interface

将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。

下载

const copyBtn = document.querySelector(".copy");

const resetButton = () => {
  setTimeout(() => {
    copyBtn.innerHTML = '<i class="bx bx-copy"></i> Copy email';
    copyBtn.classList.remove("copied");
  }, 1500);
};

const copyEmail = () => {
  // 注意：实际使用时请确保邮箱已解密或静态可见，此处为演示保留原始 HTML 字符串
  const emailHtml = '<a class="__cf_email__" data-cfemail="1d78707c74715d7a707c7471337e7270" href="/cdn-cgi/l/email-protection">[email protected]</a>';

  navigator.clipboard.writeText(emailHtml)
    .then(() => {
      copyBtn.classList.add("copied");
      copyBtn.innerHTML = '<i class="bx bx-check"></i> Email copied';
      resetButton();
    })
    .catch(err => {
      console.warn("Failed to copy email:", err);
      // 可降级处理，例如提示用户手动复制
      alert("Copy failed. Please try manually.");
    });
};

// ✅ 同时支持鼠标点击与触摸结束
copyBtn.addEventListener("click", copyEmail);

// ✅ 使用 touchend（非 touchstart）+ preventDefault
copyBtn.addEventListener("touchend", (e) => {
  e.preventDefault(); // 关键：阻止默认触摸行为（如滚动、高亮）
  copyEmail();
});

// ⚠️ 额外建议：为无障碍和键盘用户添加 keydown 支持（Enter/Space）
copyBtn.addEventListener("keydown", (e) => {
  if (e.key === "Enter" || e.key === " ") {
    e.preventDefault();
    copyEmail();
  }
});

? 关键注意事项：

❌ 避免使用 touchstart：它在手指按下瞬间触发，用户尚未完成“点击”意图，易造成误操作；
✅ 必须使用 touchend：更贴近用户“松开手指”的确认动作，语义准确；
✅ e.preventDefault() 不可省略：尤其在 <button></button> 或可聚焦元素上，能防止页面意外滚动或触发伪类（如 :active 状态异常）；
✅ 推荐补充 keydown 事件：提升可访问性（WCAG 合规），支持键盘操作；
? 安全提示：若邮箱经 Cloudflare 邮箱保护加密（如 data-cfemail），需先解密再复制纯文本邮箱，而非复制含 JS 的 HTML 字符串（否则粘贴后无法作为有效链接或文本使用）。