网页禁用鼠标右键和复制功能的几种方法

八月 16, 2023 / Mr.x / 2阅读 / 0评论/ 分类: 实用
网页禁用鼠标右键和复制功能的几种方法 — 荣小站
前端 JavaScript 交互

网页禁用鼠标右键和复制功能的几种方法

遇到精美图片或精彩文字想保存时，却发现网页屏蔽了鼠标右键？本文介绍几种用 JavaScript 实现禁止右键的方法。

问题描述

遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择"图片另存为"或"复制"来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用 JS 如何实现禁止鼠标右键的功能呢？

本文介绍四种常见的网页防护技术：禁止鼠标右键、兼容火狐的右键屏蔽、禁止选择文本、屏蔽 Ctrl 按键。这些方法可以一定程度上保护网页内容，但请注意：真正的内容保护需要后端配合，前端防护只能起到简单的阻挡作用。

方法一：简单禁止鼠标右键

最基础的实现方式，通过重定义 oncontextmenu 和 onselectstart 事件来禁用右键菜单和文本选择：

<script type="text/javascript">
document.oncontextmenu = new Function("event.returnValue=false;");
document.onselectstart = new Function("event.returnValue=false;");
</script>
属性作用
oncontextmenu鼠标右键菜单事件，返回 false 禁用
onselectstart文本选择开始事件，返回 false 禁用

方法二：兼容火狐浏览器的右键屏蔽

Firefox 浏览器与其他浏览器的事件处理有所不同，需要额外捕获 Event.MOUSEUP 事件。以下代码兼容主流浏览器：

<script type="text/javascript">
if (window.Event) {
  document.captureEvents(Event.MOUSEUP);
}

function nocontextmenu() {
  event.cancelBubble = true;
  event.returnValue = false;
  return false;
}

function norightclick(e) {
  if (window.Event) {
    if (e.which == 2 || e.which == 3) return false;
  } else if (event.button == 2 || event.button == 3) {
    event.cancelBubble = true;
    event.returnValue = false;
    return false;
  }
}

document.oncontextmenu = nocontextmenu;
document.onmousedown = norightclick;
</script>
属性/方法说明
captureEvents(MOUSEUP)捕获鼠标释放事件
e.which == 3Firefox 中右键对应的编码
event.button == 2IE/Chrome 中右键对应的编码
cancelBubble取消事件冒泡

方法三：禁止选择文本

有时候我们不仅想禁止右键，还想禁止用户选中文本（防止复制）。下面的代码可以排除 input 和 textarea 等表单元素：

<script type="text/javascript">
var omitformtags = ["input", "textarea", "select"];
omitformtags = omitformtags.join("|");

function disableselect(e) {
  if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) {
    return false;
  }
}

function reEnable() {
  return true;
}

if (typeof document.onselectstart != "undefined") {
  document.onselectstart = new Function("return false");
} else {
  document.onmousedown = disableselect;
  document.onmouseup = reEnable;
}
</script>
  • omitformtags：需要排除的标签数组，确保表单元素可以正常使用
  • disableselect：在非排除标签上禁用选择
  • reEnable：释放选择功能

方法四：屏蔽 Ctrl 按键

防止用户使用 Ctrl + C（复制）、Ctrl + V（粘贴）、Ctrl + S（保存）等快捷键：

<script type="text/javascript">
document.onkeydown = function() {
  if (event.ctrlKey) return false;
}
</script>

💡 说明：这个方法会屏蔽所有 Ctrl 组合键，包括 Ctrl+T（新建标签页）、Ctrl+W（关闭标签页）等，可能影响用户正常体验，建议谨慎使用。

完整示例

将以上方法整合到一个页面中：

<!DOCTYPE html>
<html>
<head>
  <title>禁用右键示例</title>
</head>
<body>
  <div class="poo">这个页面不能使用鼠标右键</div>
  
  <script type="text/javascript">
  // 1. 禁止鼠标右键
  document.oncontextmenu = function() { return false; }
  
  // 2. 兼容火狐
  if (window.Event) {
    document.captureEvents(Event.MOUSEUP);
  }
  document.onmousedown = function(e) {
    if (e.which == 3 || event.button == 3) return false;
  }
  
  // 3. 禁止选择文本（排除表单）
  var omitformtags = ["input", "textarea", "select"];
  document.onselectstart = function(e) {
    if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1) {
      return false;
    }
  }
  
  // 4. 屏蔽 Ctrl 按键（如需要）
  // document.onkeydown = function() { if (event.ctrlKey) return false; }
  </script>
</body>
</html>

注意事项

  • ⚠️ 前端防护有限：这些方法只能阻止普通用户，专业用户可以通过开发者工具、查看源代码等方式获取内容
  • ⚠️ 影响用户体验：过度限制会让用户感到不便，建议仅在必要时使用
  • ⚠️ 移动端无效：以上方法主要针对桌面浏览器，移动端触摸操作不受影响
  • 💡 合理使用：如果需要保护版权内容，建议采用数字水印、版权声明等技术手段

#网页禁用鼠标右键和复制功能的几种方法(1)

评论