JavaScript自定义鼠标右键菜单栏_javascript技巧_

           
             
删除
             
多选
             
平移
             
运算符
             
中间事件
        

/* 自定义右键菜单 */ #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; }

// 自定义鼠标右键菜单栏 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();  // 这里调用了我自定义的方法   } }