使用 CSS 禁用右键单击

简介

在开发网站时，我们有时需要禁用用户对网页的右键单击操作，这种需求一般出现在一些需要保护版权或者不希望用户复制内容的页面中。禁用右键单击并不是一种很安全的措施，因为用户仍然可以通过其他方式获取你的网页中的内容，但是它可以防止大多数用户通过右键菜单复制内容。

方法

禁用网页右键单击可以通过应用 CSS 样式表来实现。

方法一

body {
  /* 禁止右键单击 */
  oncontextmenu: return false;
}

在样式表中为 body 元素添加 oncontextmenu 事件，并将其设置为 return false。这样就可以禁止用户对网页进行右键单击了。

方法二

body {
  /* 禁止右键单击 */
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

在样式表中为 body 元素添加 user-select:none 样式，这样用户就无法选中文字了，从而达到禁用右键单击的效果。此方法可以在移动端和 PC 端使用。

总结

以上就是通过 CSS 禁用右键单击的两种方法，其中第二种方法不仅可以禁用右键单击，还可以禁止用户选中文字，防止网页被复制。不过这些措施不是很安全，仍然可以通过其他方式获取网页中的内容，所以在开发网站时，应该根据实际需要进行相应的保护措施。