网页禁用拷贝禁用右键

• 禁用文本选择
• 禁用浏览器原生右键功能

在网页上有时候我们会想要阻止用户选中一部分文字，比如 iconfont、网站文字 Logo 等，从而避免用户选择到无意义的文本，或者避免 Logo 展示在颜色背景上；又或者有时候我们想要阻止浏览器原生的右键功能，从而可以提供我们自己的右键菜单，为用户提供更丰富的交互体验。那么可以参考下文中的一些方法。

需要注意的是，

• 不要简单地把禁用文本选择、禁用浏览器原生右键功能的代码应用到整个 window 或 document，而应仅应用于刚好需要的地方；
• 也不要为了防采集、防爬虫而使用这些技术，因为这并不能有效阻挡爬虫或者人工采集，而只会影响用户体验。

禁用文本选择

使用 CSS user-select: none 来阻止文本选择，在禁用 JavaScript 时依旧生效，浏览器兼容性见 Can I use …

.nocopy {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

禁用浏览器原生右键功能

禁用浏览器原生右键功能，可以声明在 HTML 元素上，也可以通过 addEventListener 来进行事件绑定，两者都需要 JavaScript 支持。

<div oncontextmenu="return false"></div>

element.addEventListener('contextmenu', function(event) {
  event.preventDefault();
});