JavaScript点击事件在触摸屏上失效的问题求助

问题分析 #

你的代码在桌面设备正常，但触摸设备失效，核心原因集中在这几点：

• 单独绑定touchstart事件易和click事件冲突，且部分浏览器对触摸事件触发剪贴板操作的安全限制更严格；
• setTimeout的时间参数用了字符串类型，存在潜在类型转换问题；
• 未处理剪贴板操作的异常，无法排查触摸设备上的权限或兼容性问题；
• 未确保DOM加载完成后再执行脚本，可能导致元素未被正确获取。

修复方案 #

以下是调整后的代码，解决上述问题：

// 确保DOM加载完成后执行代码
document.addEventListener('DOMContentLoaded', () => {
  const copyBtn = document.querySelector(".copy");

  const resetCopyBtn = () => {
    setTimeout(() => {
      copyBtn.innerHTML = "<i class='bx bx-copy'></i> Copy email";
      copyBtn.classList.remove("copied");
    }, 1500); // 改为数字类型的时间参数
  };

  const copyEmail = async () => {
    try {
      // 等待剪贴板操作完成，确保触摸设备上的执行可靠性
      await navigator.clipboard.writeText("email@gmail.com");
      copyBtn.classList.add("copied");
      copyBtn.innerHTML = "<i class='bx bx-check'></i> email copied";
      resetCopyBtn();
    } catch (err) {
      // 捕获错误，方便调试触摸设备上的问题
      console.error('复制失败:', err);
      // 给用户提示复制失败
      copyBtn.innerHTML = "<i class='bx bx-error'></i> Copy failed";
      setTimeout(() => {
        copyBtn.innerHTML = "<i class='bx bx-copy'></i> Copy email";
      }, 1500);
    }
  };

  // 只绑定click事件，现代触摸设备会自动转换触摸操作为click
  copyBtn.addEventListener("click", copyEmail);
});

关键修改说明 #

• DOMContentLoaded监听：确保脚本在DOM完全渲染后执行，避免找不到.copy元素的问题；
• 移除touchstart事件：现代浏览器会将触摸操作转换为click事件，无需单独绑定，避免冲突和安全限制；
• async/await处理剪贴板操作：navigator.clipboard.writeText返回Promise，用await等待操作完成，提升触摸设备上的执行稳定性；
• 错误捕获：添加try/catch处理复制失败场景，比如浏览器权限限制、API不支持等，便于调试；
• 修正setTimeout参数：将字符串"1500"改为数字1500，避免不必要的类型转换；
• 变量名优化：将copy改为copyBtn，语义更清晰，避免和内置对象冲突。

额外建议 #

• 测试时打开触摸设备的浏览器控制台，查看错误信息定位问题；
• 针对旧浏览器可添加降级方案：创建隐藏input元素，赋值邮箱地址后选中执行document.execCommand('copy')，完成后移除input。

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