JS如何实现自定义鼠标右击菜单

2020-07-19 08:31:47 来源：易采站长站作者：

这次给大家带来JS如何实现自定义鼠标右击菜单，JS实现自定义鼠标右击菜单的注意事项有哪些，下面就是实战案例，一起来看一下。

自定义鼠标右击菜单要素：

禁止页面默认右击事件

设置右击菜单的样式以及菜单出现的位置（通过捕获鼠标点击位置来确定菜单的位置）

鼠标在指定控件（区域）上右击时显示菜单（默认菜单隐藏，点击鼠标右键时显示）

效果图

代码如下：

HTML代码

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title>    <link rel="stylesheet" type="text/css" href="right-click.css" /></head><body>    <div id="contain-friend">右击显示菜单</div>    <label id="label1"></label>    <div id="menu-friend">        <div>            <button id="btn1">菜单一</button>        </div>        <div>            <button id="btn2">菜单二</button>        </div>    </div>    <script src="right-click.js"></script></body></html>

HTML

JS代码

　　关于菜单的定位主要是在第一个if语句部分，后面为验证按钮效果。

　　menu1.style.left和menu1.style.top用于对菜单进行定位，由css样式表可知menu1的position属性定位为absolute，style.top定位相对于离它最近的position属性值不为static的父辈元素，此处即为body。

　　menu的位置需要根据页面布局的具体情况来判断是e.offsetX/Y、e.clientX/Y或是其它，此处加上document.documentElement.scrollTop是考虑加上滚动条的情况（实际上这个例子里面并没有滚动条）。

window.onload = function() {    //以下为自定义右击菜单    document.oncontextmenu = function(e) {        //阻止执行浏览器默认右击事件        e.preventDefault();        //聊天室好友列表        if (document.getElementById("menu-friend")) {            var menu1 = document.getElementById("menu-friend");            menu1.style.display = "block";            document.getElementById("contain-friend").onmousedown = function(e) {　　　　　 //菜单定位                menu1.style.left = e.offsetX + "px";                menu1.style.top = document.documentElement.scrollTop + e.clientY + "px";                //alert(menu1.style.top)                if (document.getElementById("contain-friend")) {                    if (e.button == 2) {                        menu1.style.visibility = "visible";                    } else {                        menu1.style.visibility = "hidden";                    }                }            }        }    }    if (document.getElementById("btn1")) {        document.getElementById("btn1").onmousedown = function(e) {            document.getElementById("label1").innerHTML = "你点击了菜单一"        }    }    if (document.getElementById("btn2")) {        document.getElementById("btn2").onmousedown = function(e) {            document.getElementById("label1").innerHTML = "你点击了菜单二"        }    }    return false;    //与e.preventDefault();功能相同，但是必须放在最后否则在return后面的内容均不执行}

JavaScript文件

CSS样式表

1/*自定义右击菜单*/

.contain {    background-color: #D1CEBC;    height: 100px;    width: 300px;}.menu {    width: 150px;    background-color: white;    visibility: hidden;    position: absolute;    box-shadow: 0px 0px 10px #D1CEBC}.menu-item {    background-color: #fff;    margin: 0;}.menu-item-btn {    width: 146px;    margin: 2px;    border: 0;    text-align: left;    padding-left: 60px;    padding-top: 5px;    padding-bottom: 5px;    background-color: #fff;    color: #000;}.menu-item-btn:hover {    background-color: #D1CEBC;}

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！