2023-10-16
藏龙卧虎
00
请注意,本文编写于 420 天前,最后修改于 62 天前,其中某些信息可能已经过时。

目录

简介
代码
总结
赞助

简介

现在很多WEB项目都有右键自定义菜单,覆盖浏览器右键功能,用以实现一部分自定义功能。

本文将展示使用原生JavaScript实现一个简单的自定义右键菜单,没有太多文字,主要看代码及注释即可,最后有个简单的总结。

代码

提示:可以自己新建个html文件,将下方代码复制填写到该文件中,浏览器打开该文件即可查看代码效果。

html
<!DOCTYPE html> <html> <head> <title>Right-click menu example</title> <style type="text/css"> /* css */ #manager-menu { display: none; position: absolute; background-color: #393737; border: 1px solid #ccc; padding: 5px; border-radius: 5px; z-index: 9999; /* make sure it appears on top of other elements */ } .menu { text-align: center; padding: 0.5rem 1.5rem 0.5rem 1rem; cursor: pointer; margin: 0.1rem; color: #FFF; border-radius: 5px; } .menu:hover{ background: #939393; } .click-me { text-align: center; background-color: #96d296; padding: 1rem; cursor: pointer; } </style> </head> <body> <!-- 要实现右键自定义菜单的元素 --> <div class="click-me" id="click-me">右键点我</div> <!-- 右键菜单,默认是隐藏的(详情查看上方的css) --> <div id="manager-menu"> <div class="menu" id="menu1">菜单1</div> <div class="menu" id="menu2">菜单2</div> </div> <script type="text/javascript"> // 获取需要实现右键菜单的元素 var clickDiv = document.getElementById("click-me"); // 获取右键菜单元素 var rightClickMenu = document.getElementById("manager-menu"); // 给clickDiv设置右键(contextmenu)监听 clickDiv.addEventListener('contextmenu', function(e) { // 禁用默认的右键行为 e.preventDefault(); // 保存当前右键点击的元素的id属性,以便后续业务使用 window.localStorage.setItem("clickId", e.target.id); // 使用定位跟随鼠标显示右键菜单元素 rightClickMenu.style.display = "block"; rightClickMenu.style.left = e.pageX + "px"; rightClickMenu.style.top = e.pageY + "px"; }); // 给整个dom页面设置点击(左键)事件 document.addEventListener('click', function() { // 隐藏(关闭)右键菜单 rightClickMenu.style.display = "none"; // 移除右键时保存的元素id window.localStorage.removeItem("clickId"); }); // 获取右键菜单中的"菜单1"元素 var menu1 = document.getElementById("menu1"); // 给菜单1设置点击事件,弹出相关信息 menu1.addEventListener('click', function() { alert('You clicked :' + window.localStorage.getItem("clickId") + ' and menu1'); }); </script> </body> </html>

总结

要想实现一个优秀的 Web 网站自定义右键菜单,有几个关键点:

  1. 禁止浏览器默认的右键行为;
  2. 控制好自定义菜单的出现和隐藏!
  3. 自定义菜单的定位要注意。

根据这几个关键点,可以总结出右键自定义菜单的几个主要部分:

  1. 被右键时,会出现自定义菜单的元素(show),如示例代码中的 class="click-me" div。
  2. 被左键时,会隐藏自定义菜单的元素(hidden),一般是整个dom元素,如示例中的一样。
  3. 自定义菜单的元素(默认隐藏),如示例中的 id="manager-menu" div。
  4. show 元素监听右键,编写菜单出现时的逻辑,尤其注意定位问题、参数传递问题,如示例中的 // 给clickDiv设置右键(contextmenu)监听 部分代码。
  5. hidden 元素监听左键,编写菜单隐藏的逻辑,如示例中的 // 给整个dom页面设置点击(左键)事件 部分代码。
  6. 自定义菜单的监听事件,一般是左键(点击自定义菜单后会发生什么),如示例中的 // 获取右键菜单中的"菜单1"元素 部分代码。

特别注意:要注意这些代码的执行顺序,本文示例中的部分顺序可以打乱,但如果你是通过 js 动态添加(append)的菜单元素DIV,要特别注意!

赞助

如果你觉得本文对你有用,想要给作者一些赞助,可以动动小手点击下方广告给予支持,万分感谢~

您的每次点击都能给予作者更多分享的动力!请无情点击吧:

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!