本文实例为大家分享了js实现右键菜单栏的具体代码,供大家参考,具体内容如下
1. 效果图:
鼠标悬浮:
2. 代码
(1)html
<div class="leftDiv"> <!--右键div--> <div id="rightClickDiv"> <ul id="rightClickUl"> <li class="createLi rightClickLi liHover"><span class="liContent createSpan">新建文件夹</span></li> <li class="addProduct rightClickLi liHover"><span class="liContent addProductSpan">添加产品</span></li> <li class="addWp rightClickLi liHover"><span class="liContent addWpSpan">添加类型</span></li> <li class="addPg rightClickLi liHover"><span class="liContent addPgSpan">添加编码</span></li> <hr class="splitLine" /> <li class="deleteLi rightClickLi liHover"><span class="liContent deleteSpan">删除</span></li> <li class="renameLi rightClickLi liHover"><span class="liContent renameSpan">重命名</span></li> </ul> </div> </div>
(2)css
#rightClickDiv{ display: none; position: absolute; float: left; width: 9.5vw; height: 25vh; border: 1px solid #d8d8d8; box-shadow:3px 3px 5px #dadada; z-index: 10001; background-color: white; } ul#rightClickUl { position: relative; width: 100%; height: 96%; top: 2%; font-size: 0.77vw; color: #525252; cursor: default; } #rightClickUl> li{ position: relative; margin-top: 2%; height: 3vh; font-size: 0.77vw; line-height: 1.5vw; } .liHover:hover{ /*鼠标悬浮样式*/ background-color: #e1e1e1; } .dLi{ /*禁止访问时文件颜色变更*/ color: #bababa; }.liContent{ position: relative; left: 21%; }
(3)js
/** * 禁用鼠标右键 */ $('.leftDiv').on('contextmenu', function () { return false; }); /** * 目标区域点击事件 */ $('.leftDiv').on('mousedown', function (event) { var code = event.which; switch (code) { case 1: // 左键 console.log(event); // 判断子元素 if (event.target.className.indexOf('addProductSpan') >-1 || event.target.className.indexOf('addProduct')>-1) { // 添加产品 console.log("添加产品"); } else if (event.target.className.indexOf('addWpSpan') >-1 || event.target.className.indexOf('addWp')>-1){ // 添加零件 console.log("添加零件"); } else if (event.target.className.indexOf('addPgSpan') >-1 || event.target.className.indexOf('addPg')>-1){ // 添加程序 console.log("添加程序"); } else if (event.target.className.indexOf('createLi') >-1 || event.target.className.indexOf('createSpan')>-1) { // 添加文件夹 console.log("添加文件夹"); } else if (event.target.className.indexOf('deleteLi') >-1 || event.target.className.indexOf('deleteSpan')>-1){ // 删除 if (!$(".deleteLi").hasClass('dLi')){ console.log("删除"); } } else if (event.target.className.indexOf('renameLi') >-1 || event.target.className.indexOf('renameSpan')>-1){ // 重命名 if (!$(".renameLi").hasClass('dLi')){ console.log("重命名"); } } else if (event.target.className.indexOf('ztree') > -1){ $('#rightClickDiv').hide(); } break; case 2: mouse = "中键(滚轮)"; break; case 3: mouse = "右键"; // 点击区域空白处 console.log(event); if (event.target.className.indexOf("ztree")>-1){ // 更改内容 点击空白页面 $("#rightClickUl>li:not(.createLi)").removeClass("liHover").addClass("dLi"); } else if (event.target.className.indexOf("ico_docu")>-1 || event.target.className.indexOf("node_name") > -1){ // 更改内容 点击产品类包 $(".addProduct").addClass("liHover").removeClass("dLi"); $("#rightClickUl>li:not(.addProduct)").removeClass("liHover").addClass("dLi"); } var x = event.offsetX; var y = event.offsetY; // 如果点击位置在div右侧,调整显示位置 if (event.offsetX + $("#rightClickDiv").width() > $(this)[0].clientWidth) { x = $(this)[0].clientWidth - $("#rightClickDiv").width(); } if (event.offsetY + $("#rightClickDiv").height() > $(this)[0].clientHeight) { y = $(this)[0].clientHeight - $("#rightClickDiv").height(); } //改变菜单的位置到事件发生的位置 $('#rightClickDiv').css({'top': y,'left': x,'display': 'block'}); break; default: break; } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。