js禁用网页鼠标右键及复制

忘是亡心i 2022-12-25 07:59 212阅读 0赞

在开发过程中，我们可能会遇到不想让使用者使用网页的复制功能对网页内容进行复制，如何来实现呢？

整理了下，有以下两种方法：

## 1：在html元素内使用标签禁用： ##

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body oncontextmenu="return false" onselectstart="return false" oncopy="return false">
    <ul>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
    </ul>
    </body>
    </html>

## 2：使用js代码进行控制： ##

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    </head>
    <body>
    <ul>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
      <li><a href="###">沉浮动静皆人生</a></li>
    </ul>
    <script>
    document.oncontextmenu = function(){
      return false;
    }
    document.onkeydown = function(){
      if (event.ctrlKey && window.event.keyCode==67){
        return false;
      }
    }
    document.body.oncopy = function (){
      return false;
    }
    //不建议连选中文本都不行
    document.onselectstart = function(){
      //return false;
    }
    </script>
    </body>
    </html>

当然，上面js代码是控制整个页面不可复制，如果要控制某个区域的话，制定区域元素即可：

document.getElementById("active-intro").oncontextmenu = function () {
                    event.returnValue = false;
                }

--------------------

补充。

还有一种是网页上可以鼠标拖动，然后将内容选中，选中的内容直接拖动到excel,这也是一种数据被复用的问题，如何解决，在js脚本中增加如下：

//禁用鼠标选中
    document.body.onselectstart = function () {
        return false;
    };