本文实例为大家分享了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; } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。