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>

恭喜你，成功解決了！