网页禁用右键并且弹窗调戏用户

javascript 2020-03-28 1649 次浏览 次点赞

总体思路,主要是使用javascript脚本来实现。
核心代码如下:

<script type="text/JavaScript"> document.oncontextmenu=function(e){return false;}</script>
<script type="text/javascript">
function hello(){
    alert("别闹了,我知道你最厉害了。");
}
</script>


再给body标签定义一个oncontextmenu事件调用hello函数,这样当别人在网页点击右键的时候,可以弹出了。
下面完整演示demo代码如下(真丑警告⚠):
页面真的很丑。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" charset="utf-8"/>
    <title>网页禁用鼠标右键并弹出弹窗</title>
<script type="text/JavaScript"> document.oncontextmenu=function(e){return false;}</script>
<script type="text/javascript">
function hello(){
    alert("别闹了,我知道你最厉害了。");
}
</script>
<style type="text/css">
    body{margin:0;}
.header{
        margin:20px 20px;text-align:center;
    }
.header ul{
    list-style:none;text-align:center;width:1200px;height:60px;background-color:salmon;margin:0px auto;
    }
.header ul li{
    display:inline-block;margin:5px 40px; background-color:salmon;height:50px; width:150px;
    }
.header ul li a{
    text-decoration:none;padding:0px 20px;line-height:50px;height:40px;
    }
.header a:link {color:black}        /* 未访问的链接 */
.header a:visited {color:lightyellow}    /* 已访问的链接 */
.header a:hover {background-color:whitesmoke;color:#3840EF}    /* 鼠标移动到链接上 */
.header a:active {color:#D758F2}    /* 选定的链接 */
.content{margin:10px auto;text-align:center;width:1200px;height:400px;}
.content p{width:800px;height:400px;float:left;background-color: salmon;}
.links{width:400px;height:400px;float:left;}
.links ul{
    list-style:none;text-align:center;height:400px;width:400px;background-color: black;
    }
.links ul li{
    margin:10px 0px; background-color:aqua;height:60px; width:350px;
    }
.links ul li a{
    text-decoration:none;padding:0px 20px;line-height:60px;height:40px;
    }
.links a:link {color:black}        /* 未访问的链接 */
.links a:visited {color:red}    /* 已访问的链接 */
.links a:hover {color:#FF00FF}    /* 鼠标移动到链接上 */
.links a:active {color:#0000FF}    /* 选定的链接 */
.footer{margin: 10px auto;text-align:center;width:1200px;line-height: 200px; height:200px;background-color:salmon;clear:left;}
</style>
</head>
<body oncontextmenu="hello();">
<div class="header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">时光</a></li>
<li><a href="#">江湖</a></li>
<li><a href="#">天下</a></li>
<li><a href="#">最后</a></li>
</ul>
</div>
<div class="content">
<h3>这只是一个展示demo</h3>
<p>这个demo真的只是随手写的,写得丑请勿介意。要是还是觉得很介意,又觉得写得烂,那么没有办法了。<br>
    还是别看吧!<br>
    这个demo真的只是随手写的,写得丑请勿介意。要是还是觉得很介意,又觉得写得烂,那么没有办法了。<br>
    还是别看吧!<br>
    这个demo真的只是随手写的,写得丑请勿介意。要是还是觉得很介意,又觉得写得烂,那么没有办法了。<br>
    还是别看吧!</p>
<div class="links">
<ul>
<li><a href="#">快乐</a></li>
<li><a href="#">其实</a></li>
<li><a href="#">有钱</a></li>
<li><a href="#">就会</a></li>
<li><a href="#">简单</a></li>
</ul>
</div>
</div>
<div class="footer">
    2020-03-28 深夜0:36 blog.8wkj.com 测试demo @版权所有
</div>
</body>
</html>

本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论