如何创建一个JavaScript驱动的自定义鼠标右键菜单栏？

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

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

基本思路如下：

1. HTML结构

2.自定义鼠标右键菜单列

1. HTML结构

菜单项1 菜单项2

2. 自定义鼠标右键菜单列

javascript// 监听鼠标右键点击事件document.addEventListener('contextmenu', function(e) { e.preventDefault(); // 阻止默认的右键菜单 // 获取当前点击元素 const target=e.target; // 计算菜单位置 const menuPosition={ top: e.clientY, left: e.clientX }; // 显示菜单 const menu=document.querySelector('.right-click-menu'); menu.style.top=`${menuPosition.top}px`; menu.style.left=`${menuPosition.left}px`; menu.style.display='block'; // 添加点击事件监听，关闭菜单 menu.addEventListener('click', function() { menu.style.display='none'; }); // 添加鼠标点击事件监听，关闭菜单 document.addEventListener('click', function() { menu.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();  // 这里调用了我自定义的方法   } }

大概效果如下

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