JavaScript自定义鼠标右键菜单栏

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

大概思路如下

一、 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();  // 这里调用了我自定义的方法
  }
}

大概效果如下

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