Js自定义鼠标左键

最新推荐文章于 2023-07-03 22:56:14 发布

海龟先生plus

最新推荐文章于 2023-07-03 22:56:14 发布

阅读量957

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_45219069/article/details/94588484

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            font-size: 14px;
            color: #000;
            padding: 10px 0;
            border-bottom: 1px dashed;
        }
        ul{
            width: 80px;
            border-radius: 5px;
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <ul>
       
        <li><a href="#">前进</a></li>
        <li>后退</li>
        <li>刷新</li>
        <li>检查</li>
        <li>查看源代码</li>
    </ul>
    <script>//首先要去掉浏览器的默认跳转，然后给点击鼠标右键设置事件，再点击左键时恢复
        var uls=document.querySelector("ul")
        oncontextmenu=function(event){ //点击鼠标左键配合return false去点浏览器默认跳转
            var event=event||window.event//需要让自定义的ul随鼠标左键的随机位置变化，所以赋予它浏览器鼠标坐标值
            uls.style.display="block"   //现身
            var t=event.clientY         //获取坐标值，没有单位
            var l=event.clientX
            uls.style.top=t+"px"        //赋值给定位的元素，注意单位
            uls.style.left=l+"px"
            return false
        }
        document.onclick=function(){
            uls.style.display="none"    //点左键时隐藏
        }
    </script>

在这里插入图片描述