禁用网页右键菜单与复制粘贴功能（输入框除外）-js教程-PHP中文网

禁用网页右键菜单与复制粘贴功能（输入框除外）

本文介绍如何通过原生 JavaScript 全局禁用右键菜单、文本选择、剪切复制及拖拽操作，同时保留所有和等可编辑元素的默认交互行为，兼顾内容防护与基础可用性。

本文介绍如何通过原生 javascript 全局禁用右键菜单、文本选择、剪切复制及拖拽操作，同时保留所有 `` 和 `` 等可编辑元素的默认交互行为，兼顾内容防护与基础可用性。

在内容敏感型网站（如行业白皮书、SEO核心文案页）中，防范低门槛的内容盗用是常见需求。虽然 JavaScript 层面的防护无法阻止技术熟练者（例如通过 DevTools 或禁用脚本绕过），但它能有效拦截绝大多数营销人员、竞品运营等非技术人员的直接复制行为，显著提升盗取成本。

以下为推荐实现方案，采用事件委托 + 精准白名单策略，确保全局防护的同时不破坏表单交互：

// 阻断通用事件：右键、复制、剪切、选中、拖拽
function blockEvent(e) {
  e.preventDefault();
  e.stopPropagation();
  return false;
}

// 仅传播（不阻断），用于白名单元素
function passthroughEvent(e) {
  e.stopPropagation();
  return true;
}

// 全局监听（捕获阶段可选，但此处使用冒泡阶段已足够）
document.addEventListener('contextmenu', blockEvent);
document.addEventListener('cut', blockEvent);
document.addEventListener('copy', blockEvent);
document.addEventListener('selectstart', blockEvent);
document.addEventListener('dragstart', blockEvent);

// 白名单：允许所有可编辑表单控件保持原生行为
const editableElements = document.querySelectorAll('input, textarea, [contenteditable="true"]');
editableElements.forEach(el => {
  el.addEventListener('contextmenu', passthroughEvent);
  el.addEventListener('cut', passthroughEvent);
  el.addEventListener('copy', passthroughEvent);
  el.addEventListener('selectstart', passthroughEvent);
  el.addEventListener('dragstart', passthroughEvent);
});

✅ 关键优化点说明：

使用 querySelectorAll('input, textarea, [contenteditable="true"]') 替代仅 input，覆盖文本域与富文本编辑区域；
passthroughEvent 仅调用 stopPropagation() 而非 preventDefault()，确保事件在目标元素上仍可被浏览器默认处理；
所有事件监听均绑定在 document 或具体元素上，避免重复绑定或内存泄漏；
无需 jQuery，纯原生 ES5+ 兼容，适合现代项目及需兼容 IE11 的场景（若需 IE11，请将箭头函数改为 function 声明）。

⚠️ 注意事项：

此方案不影响键盘快捷键（如 Ctrl+C 在禁用状态下仍可能触发，因部分浏览器对快捷键有独立处理逻辑）；如需进一步限制，可补充监听 keydown 并过滤 Ctrl/Cmd + C/V/X 组合键（但会降低可访问性，不推荐）；
移动端需额外考虑长按触发的系统菜单（touchstart + setTimeout 模拟禁用较复杂，且效果有限，建议优先依赖服务端水印与版权申明）；
务必配合其他防护手段：禁用图片右键保存（<img oncontextmenu="return false">）、启用 CSP 头、添加不可见水印文字、定期全站内容指纹监控等。