html 屏蔽右鍵(兩種方法——body屏蔽、重新定義右鍵內容)

 方法一:有弊端但代碼簡單

當拖動右鍵的時候不能屏蔽

全屏的時候不能屏蔽

<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">

方法二:完全屏蔽,重新定義右鍵內容

<!DOCTYPE HTML>
<html id="myDiv">
    <head>
        <meta charset="UTF-8"/>
        <title>DOM3 event textInput</title>
        <style type="text/css">
            #myMenu{
                position: absolute;
                background: #eee; 
                list-style: none;
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <ul id="myMenu">
            <!-- <li><a href="http://www.baidu.com">百度</a></li> --> 
        </ul>
        <script type="text/javascript">
            window.onload = function(){
                document.getElementById('myDiv').addEventListener('contextmenu',function(e){
                    e.preventDefault();//取消瀏覽器默認行爲,以保證不顯示瀏覽器默認的上下文菜單
                    var menu = document.getElementById('myMenu');
                    menu.style.left = e.clientX+"px";
                    menu.style.top = e.clientY+"px";
                    menu.style.visibility = 'visible';
                },false);
                document.addEventListener('click',function(){
                    var menu = document.getElementById('myMenu');
                    menu.style.left = "0px";
                    menu.style.top = "0px";
                    menu.style.visibility = 'hidden';
                },false);
            }
        </script>
    </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章