当前位置：首页 > JavaScript

js实现右键复制

2026-03-16 07:29:01JavaScript

实现右键复制功能

在JavaScript中实现右键复制功能可以通过监听contextmenu事件（右键菜单事件）并结合document.execCommand或现代Clipboard API完成。以下是两种常见方法：

方法一：使用Clipboard API（推荐）

现代浏览器支持异步的Clipboard API，更安全且无需依赖已选中的文本：

document.addEventListener('contextmenu', (e) => {
  e.preventDefault(); // 阻止默认右键菜单
  const textToCopy = e.target.innerText || '默认文本';

  navigator.clipboard.writeText(textToCopy)
    .then(() => console.log('复制成功'))
    .catch(err => console.error('复制失败:', err));
});

注意：Clipboard API要求域名处于安全上下文（HTTPS或localhost），否则会抛出异常。

方法二：使用execCommand（兼容旧浏览器）

通过创建临时选区实现复制，适用于不支持Clipboard API的环境：

document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  const range = document.createRange();
  range.selectNodeContents(e.target);
  window.getSelection().removeAllRanges();
  window.getSelection().addRange(range);

  try {
    const success = document.execCommand('copy');
    console.log(success ? '复制成功' : '复制失败');
  } catch (err) {
    console.error('复制错误:', err);
  }

  window.getSelection().removeAllRanges();
});

自定义右键菜单示例

若需替换浏览器默认右键菜单，可结合DOM操作：

js实现右键复制

document.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  const menu = document.createElement('div');
  menu.style.position = 'absolute';
  menu.style.left = `${e.clientX}px`;
  menu.style.top = `${e.clientY}px`;
  menu.innerHTML = '<button id="copyBtn">复制</button>';
  document.body.appendChild(menu);

  document.getElementById('copyBtn').addEventListener('click', () => {
    navigator.clipboard.writeText(e.target.innerText);
    document.body.removeChild(menu);
  });

  // 点击其他地方关闭菜单
  document.addEventListener('click', () => {
    if (menu.parentNode) document.body.removeChild(menu);
  }, { once: true });
});