JS添加右键菜单 向右看齐 2022-02-21 04:53 478阅读 0赞 在前端开发的时候,会用到“右键菜单”,如给div添加右键菜单等, **示例:** ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z0b3BxeA_size_16_color_FFFFFF_t_70][] **代码如下:** <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css"> .s-move-content-outer{border:1px black solid;width:200px;height:200px;position:relative;outline:none;user-select:none;/*overflow:hidden;*/;} .vpopmenu{ position:absolute; width:200px; border-radius:5px; background-color:rgba(13,78,146,0.9); border:rgb(13,78,146); z-index:9999; padding:2px; display:none; } .vpopmenu>div{ padding:2px 2px 2px 30px; height:24px; } .vpopmenu > div:hover { background-color:rgba(245, 239, 89, 0.30); } </style> </head> <body> <div class="s-move-content-outer" tabIndex="1" > <div class="s-move-content-header">div1</div> <div>内容1</div> </div> <div id="r_menu" class="vpopmenu"> <div id="menu_create" onclick="createMenu();">新增</div> <div id="menu_copy" onclick="copyMenu();">页内复制</div> <div id="menu_copy" onclick="delMenu();">删除</div> </div> </body> <script type="text/javascript"> bindMenu(); var menu = document.getElementById("r_menu"); function bindMenu(){ //给所有class=s-move-content-outer的div都加上右键菜单 var $BIPanel = $("div[class='s-move-content-outer']").contextmenu(function(ev) { var oEvent = ev || event; //自定义的菜单显示 menu.style.display = "block"; //让自定义菜单随鼠标的箭头位置移动 menu.style.left = oEvent.clientX + "px"; menu.style.top = oEvent.clientY + "px"; //return false阻止系统自带的菜单, //return false必须写在最后,否则自定义的右键菜单也不会出现 return false; }); } //实现点击document,自定义菜单消失 document.onclick = function() { menu.style.display = "none"; } </script> </html> [watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Z0b3BxeA_size_16_color_FFFFFF_t_70]: /images/20220221/b4cf38cd528a4850b9fdf695f103d8ad.png
还没有评论,来说两句吧...