如何用JS实现自定义链接处理：长按2秒复制文本并跳转

没问题，我来帮你实现这个长按链接既跳转又复制文本的功能。这里是完整的解决方案，还加了一些优化和兼容细节：

完整代码示例 #

<a onmousedown='startChrono();' onmouseup='checkChrono(this);' href='http://SomeUrl.org'>Some meaningful text</a>

<script>
// 全局变量存储鼠标按下的时间戳
let referDate;

function startChrono() {
  // 记录鼠标按下瞬间的时间
  referDate = new Date().getTime();
}

function checkChrono(linkElement) {
  // 计算按下到松开的时长（毫秒）
  const elapsedTime = new Date().getTime() - referDate;

  // 判断是否满足长按2秒的条件
  if (elapsedTime >= 2000) {
    // 获取链接的文本内容（去除前后多余空格）
    const linkText = linkElement.textContent.trim();

    // 复制文本到剪贴板 - 现代浏览器推荐方案
    navigator.clipboard.writeText(linkText)
      .then(() => {
        console.log(`已成功复制：${linkText}`);
        // 也可以在这里添加页面提示，比如自定义弹窗或alert
      })
      .catch(err => {
        console.error('复制操作失败:', err);
      });
  }

  // 链接会自动执行默认跳转行为，无需额外处理
}
</script>

关键细节说明 #

• 我把checkChrono(this.id)改成了checkChrono(this)，直接传递链接DOM元素，比通过ID重新获取元素更高效简洁。
• startChrono函数负责记录鼠标按下的时间戳，checkChrono函数计算时长并判断是否触发复制。
• 使用navigator.clipboard.writeText是现代浏览器的标准剪贴板API，安全且易用，但需要在HTTPS或localhost环境下才能正常工作。

兼容旧环境/HTTP网站的方案 #

如果你的网站运行在HTTP协议下（非安全上下文），上面的剪贴板API会失效，可以改用传统的文本框模拟复制方法，替换掉checkChrono里的复制逻辑：

function checkChrono(linkElement) {
  const elapsedTime = new Date().getTime() - referDate;

  if (elapsedTime >= 2000) {
    const linkText = linkElement.textContent.trim();
    
    // 兼容旧环境的复制实现
    const tempTextarea = document.createElement('textarea');
    tempTextarea.value = linkText;
    // 隐藏临时文本框，避免影响页面布局
    tempTextarea.style.position = 'absolute';
    tempTextarea.style.left = '-9999px';
    document.body.appendChild(tempTextarea);
    
    // 选中并复制文本
    tempTextarea.select();
    try {
      document.execCommand('copy');
      console.log(`已成功复制：${linkText}`);
    } catch (err) {
      console.error('复制操作失败:', err);
    }
    
    // 移除临时元素
    document.body.removeChild(tempTextarea);
  }
}

这样不管是现代浏览器还是旧环境，都能正常完成复制功能。

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