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

时间 2019-11-13

标签 web 页面禁用右键左键禁止查看源代码触摸栏目 HTML 繁體版

原文原文链接

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

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

<!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以后会禁用当前鼠标的状态。可是连续单击鼠标左键和右键便又能够看到右键菜单了。spa

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

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

禁用左键：onselectstart="return false"ip

禁用复制：oncopy="return false;"utf-8

禁用剪切：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的触摸板上是不能识别的。下面请看第三种方法。get

三、思路就是一样利用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>

恭喜你，成功解决了！

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