Html鼠标右键菜单代码

来源：互联网发布：淘宝网上编辑：程序博客网时间：2024/05/17 23:43

<!DOCTYPE html>

<html lang="en"><head>    <meta charset="UTF-8">    <title>html菜单显示界面</title>    <style type="text/css">        *{            margin: 0;            padding: 0;        }        #btn{            width: 60px;            height: 30px;            background-color: #01AAED;            color: white;            display:none;            position: fixed;            left: 0%;            top: 0%;        }        #btn:hover{            background-color: white;            color: black;        }    </style></head><body><input type="button" value="删除" id="btn"><div style="text-align: center">    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="" id="img"></div><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script><script>    $(function(){        //此处是针对图片，如果这个元素上鼠标右键，将浏览器默认右键事件给拦截了        $("#img").bind("contextmenu",function(e){            return false;        });

//之前在网上看过很多代码，但是有一个bug，算不少bug，但是我要在这里说一下。鼠标右键点击事件鼠标松开之后 执行的  ，因为个人的操作习惯，当右键点起的时候  在

按钮的0*0位置也执行了右键  ，所以说  上边屏蔽了为什么还显示默认浏览器菜单，那么  我们只需要把显示的元素鼠标右键给屏蔽掉就不会了，欢迎大家转载本代码，谢谢大家！

        $("#btn").bind("contextmenu", function () {            return false;        })        $("#img").mousedown(function (e) {            if (e.which == 3)            {                //获取鼠标的x轴                var x = e.pageX;                //获取鼠标的Y轴                var y = e.pageY;                //对我们设定的菜单元素位置移动到当前鼠标右键点击的位置，并且显示出来                $("#btn").css({ 'top': y + 'px', 'left': x + 'px', 'display': 'block', 'position': 'absolute' });            }        })    })</script></body></html>

阅读全文

0 0