禁止鼠标右键及添加相关事件

发布于 2024-04-09  32 次阅读


在网页中我们可以禁止鼠标右键,是鼠标右键不弹出浏览器选项,是怎么做的呢?

首先,最简单的就是直接引入js,如:

<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/noSomeKey.js"></script>

放在body或者head即可

但是,我们想要修改或者自定义右击效果怎么做呢?首先下载这个js,把他放到我们的博客目录内,我这里放的是博客根目录/themes/metary/source/js下

然后打开编辑:

/* 禁止右键 */
document.oncontextmenu = function(){
    return false;
}

可以看到一两句代码就实现了,然后把我们引入的js更改为我们自己的:

<script src="/js/noSomeKey.js"></script>

然后我们向里面添加事件:

document.oncontextmenu = function(e){
    var a = "点人家干嘛呢~";//定义点击右键出现的文字
    var $i = $("<span/>").text(a);
    var x = e.pageX,y = e.pageY;//获取鼠标的坐标
    $i.css({//设置样式
        "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
        "top": y - 20,
        "left": x,
        "position": "absolute",
        "font-weight": "bold",
        "color": "#ff6651"
    });
    $("body").append($i);//显示文字
    $i.animate({//设置漂浮
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {//设置自动删除
            $i.remove();
        });
    return false;

}

至此我们自定义事件就完成了,如现在博客的效果,也可以自定义你的事件,开始吧!!

届ける言葉を今は育ててる
最后更新于 2024-04-09