如何将自定义右键菜单改写为长尾？

本文共计635个文字，预计阅读时间需要3分钟。

在项目中遇到了一个需求，需要自定义鼠标右键菜单栏的功能。今天在这里写一个小方法，供大家参考。同时欢迎指出存在的问题。

基本思路如下：

一、HTML结构 自定义鼠标右键菜单 选项1 选项2 选项3

二、自定义鼠标右键菜单javascriptdocument.addEventListener('contextmenu', function(e) { e.preventDefault();

var contextMenu=document.getElementById('contextMenu'); contextMenu.style.left=e.clientX + 'px'; contextMenu.style.top=e.clientY + 'px'; contextMenu.style.display='block';});

document.getElementById('contextMenu').addEventListener('click', function(e) { var target=e.target; if (target.tagName==='LI') { alert('点击了：' + target.innerText); }});

document.addEventListener('click', function() { var contextMenu=document.getElementById('contextMenu'); contextMenu.style.display='none';});

在项目中遇到了一个需要自定义鼠标右键菜单栏的功能，今天在这里写个小的方法，可以参考参考，同时欢迎大佬指出存在的问题。

大概思路如下

一、 html结构

<!-- 自定义鼠标右键菜单 --> <div id="menu">           <ul>             <li onclick="menuClick(1)">删除</li>             <li onclick="menuClick(2)">多选</li>             <li onclick="menuClick(3)">平移</li>             <li onclick="menuClick(4)">运算符</li>             <li onclick="menuClick(5)">中间事件</li>        </ul> </div>

二、 css样式

/* 自定义右键菜单 */ #menu{     display: none;     position: absolute;      width: 150px;     border:1px solid #ccc;     background: #eee; } #menu ul {     margin: 5px 0; } #menu li{   height: 30px;   line-height: 30px;   color: #21232E;   font-size: 12px;   text-align: center;   cursor: default;   list-style-type: none;   border-bottom:1px dashed #cecece ;  } #menu li:hover {     background-color: #cccccc; }

三、 js代码

// 自定义鼠标右键菜单栏 var menu = document.getElementById('menu'); document.body.oncontextmenu = function (e) { // 自定义body元素的鼠标事件处理函数   var e = e || window.event;   e.preventDefault(); //阻止系统右键菜单    // 显示自定义的菜单调整位置   let scrollTop =     document.documentElement.scrollTop || document.body.scrollTop;// 获取垂直滚动条位置   let scrollLeft =     document.documentElement.scrollLeft || document.body.scrollLeft;// 获取水平滚动条位置   menu.style.display = 'block';   menu.style.left = e.clientX + scrollLeft + 'px';   menu.style.top = e.clientY + scrollTop + 'px'; } // 鼠标点击其他位置时隐藏菜单 document.onclick = function () {   menu.style.display = 'none'; } var menuClick = function (m) {   if (m == "1") {     alert("删除成功")   } else if (m == "2") {     alert("暂未开通")   } else if (m == "3") {     alert("暂未开通")   } else if (m == "4") {     alert("暂未开通")   } else if (m == "5") {     createInterEvent();  // 这里调用了我自定义的方法   } }

大概效果如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。