web页面禁用右键、禁用左键、禁止查看源代码、禁用触摸板

在网页中禁用右键，能够直接的保护页面的源码，禁止用户右键查看原代码。这只是从最基础来预防，有备而来的黑客还是可以轻而易举的拿到代码，保险的还是从代码层级保护代码。

1、众所周知的鼠标 click 事件。示例：

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>禁用右键</title>
</head>
<body>
点我一下试试！！
<div >
</div>

<script>
    function click(){
        if(event.button === 2){
            alert( '您点击了鼠标右键 !!');
            // return false;
        } else if(event.button === 1){
            alert( '您点击了鼠标中键 !!');
            // return false;
        } else if(event.button === 0){
            // alert( '您点击了鼠标左键 !!');
            return false;
        }
    }
    document.onmousedown=click
</script>

</body>
</html>

return false之后会禁用当前鼠标的状态。但是连续单击鼠标左键和右键便又可以看到右键菜单了。

2、有一种方法区别于第一种方法，就是从dom的属性起到限制的作用。在body内添加属性你会发现，下面的弹窗并没有出现。

禁用右键：oncontextmenu="return false" 或者 oncontextmenu=self.event.returnValue=false

禁用左键：onselectstart="return false"

禁用复制：oncopy="return false;"

禁用剪切：oncut="return false;"

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title>禁用右键</title>
</head>
<body oncontextmenu=self.event.returnValue=false>
点我一下试试！！
<div >
</div>

<script>
    function click(){
        if(event.button === 2){
            alert( '您点击了鼠标右键 !!');
        } else if(event.button === 1){
            alert( '您点击了鼠标中键 !!');
        } else if(event.button === 0){
            // alert( '您点击了鼠标左键 !!');
            return false;
        }
    }
    document.onmousedown=click
</script>

</body>
</html>

这种方法，使用时适用于鼠标，但是右键选中状态，在mac的触摸板上是不能识别的。下面请看第三种方法。

3、思路就是同样利用dom的 oncontextmenu 属性定义事件，在定义的事件上，禁用右键。示例：

<!DOCTYPE html>
<html style="height: 100%;" >
<head>
    <meta charset="utf-8">
    <title>禁用右键</title>
    <style>
        #myDIV {
            background: yellow;
            border: 1px solid black;
            padding: 10px;
            height: 100%;
        }
    </style>
</head>
<body id="myDIV">
点击右键试试是否有效

<script>
    document.getElementById("myDIV").oncontextmenu = function() {myFunction()};
    function myFunction() {

        window.event.returnValue=false;
        return false;
    }
</script>

</body>
</html>

恭喜你，成功解决了！

如开头所讲，这些解决办法只是最基本的防止源代码丢失，不过这样对于微有经验的开发者来说，就是茅草门。具体的防御还是需要从代码层级加强。

来源：oschina

链接：https://my.oschina.net/u/3502206/blog/2221593

标签

按钮