原生实现鼠标右键点击显示菜单

屏蔽自定义菜单区域的浏览器右键菜单
获取右键点击区域
获取菜单点击的区域
点击其他区域移除菜单

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>右键点击菜单</title><style>ul {list-style: none;display: flex;}.main-box {position: relative;display: flex;}.menu-box,.right-menu {margin: 0;padding: 0;}.menu-box > li {margin: 5px;padding: 5px 20px;background-color: aqua;cursor: pointer;}.right-menu {width: 100px;position: absolute;background-color: var(--color-bg);font-size: 13px;cursor: pointer;color: var(--color-text);z-index: 9999;box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);display: flex;flex-direction: column;}.right-menu > li {padding: 5px 2px;cursor: pointer;}.right-menu > li:hover {color: #3477f2;}</style></head><body><div class="main-box"><ul class="menu-box"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul></div><script>// 取消main-box区域右键浏览器菜单document.querySelector(".main-box").oncontextmenu = function (e) {return false;};// 监听鼠标点击事件document.querySelector(".menu-box").onmousedown = function (e) {// 2是鼠标右键if (e.button === 2) {console.log(e);console.log("点击了", e.srcElement.innerHTML);// 创建菜单domcreateRightMenu(e.clientX, e.clientY);}};function createRightMenu(clientX, clientY) {let rightMenuDom = document.getElementById("right-menu");const tagDomBox = document.querySelector(".main-box");if (rightMenuDom) {//   rightMenuDom.remove();tagDomBox.removeChild(rightMenuDom);}tagDomBox?.insertAdjacentHTML("beforeend",`<ul id="right-menu" class="right-menu"><li>刷新</li><li>关闭</li><li>全部关闭</li></ul>`);rightMenuDom = document.getElementById("right-menu");rightMenuDom.style.left = clientX + "px";rightMenuDom.style.top = clientY + "px";console.log(tagDomBox, rightMenuDom);// 监听页面点击事件，其他地方点击移除菜单domwindow.addEventListener("click", hideMenu);}function hideMenu(e) {let rightMenuDom = document.getElementById("right-menu");console.log(e.target.parentNode === rightMenuDom);if (e.target.parentNode === rightMenuDom) {// 点击的哪个菜单console.log(e.target);}rightMenuDom?.remove();}</script></body>
</html>

原生实现鼠标右键点击显示菜单相关推荐

JS点击显示隐藏内容
JS点击显示隐藏密码思路:获取元素,判断点击,如果DIV显示就隐藏,如果DIV隐藏就显示出来. 1 if(DIV是显示的){ 2 div.style.display='none'; 3 } 4 el ...
java swing最小化_Java swing 窗口最小化到任务栏点击右键显示菜单（复制代码即可运行查看效果）...
Java swing 窗口最小化到任务栏点击右键显示菜单(复制代码即可运行查看效果) package swing; import java.awt.AWTException; import java ...
计算机文件右击怎么显示打开方式,修复鼠标右键点击文件打开方式在win10中没有反应...
当我们在电脑中需要打开文件夹的不同设置的选项的时候是可以直接在鼠标的右键中进行设置打开的,选择文件的不同的打开的时候有小伙伴在win10电脑中点击右键发现没有反应的情况遇到这个问题我们怎么恢复右键的使 ...
java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
菜单栏点击显示二级菜单_显示完整菜单
菜单栏点击显示二级菜单 On my own computer, I like to see the full menus in Excel, so I selected that setting: 在 ...
纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单
纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想: input<type="checkbox">(复选框) label和in ...
jQuery实现下拉菜单(点击显示/隐藏)
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>j ...
win7计算机里桌面菜单没有反应,win7系统鼠标右键点击桌面没反应怎么办鼠标右键没反应解决方法...
win7系统鼠标右键没反应怎么办?最近有win7用户反映说鼠标右键点击桌面没反应,检查了鼠标没出现什么物理损伤,那么出现点击鼠标右键失灵意味着不能新建文件夹,不能选择属性等等一系列不方便,现在针对这个 ...
html鼠标点击显示二级菜单内容,怎样操作js实现二级菜单点击显示当前内容
这次给大家带来怎样操作js实现二级菜单点击显示当前内容,操作js实现二级菜单点击显示当前内容的注意事项有哪些,下面就是实战案例,一起来看一下. 最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级 ...

原生实现鼠标右键点击显示菜单

原生实现鼠标右键点击显示菜单

原生实现鼠标右键点击显示菜单相关推荐

最新文章

热门文章