html 屏蔽右键（两种方法——body屏蔽、重新定义右键内容）

最新推荐文章于 2024-03-16 09:16:45 发布

chengchengbox

最新推荐文章于 2024-03-16 09:16:45 发布

阅读量854

点赞数

分类专栏： html js

本文链接：https://blog.csdn.net/qq_34297991/article/details/104668475

版权

html 同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

25 篇文章 0 订阅

订阅专栏

方法一：有弊端但代码简单

当拖动右键的时候不能屏蔽

全屏的时候不能屏蔽

<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>

chengchengbox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 屏蔽右键（两种方法——body屏蔽、重新定义右键内容）

<body ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
复制链接

扫一扫