JavaScript - 自定义鼠标右键菜单
2021/11/6 17:09:59
本文主要是介绍JavaScript - 自定义鼠标右键菜单,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
文章目录
- 示例
- 参考
示例
设计思路:
- 禁用原始鼠标右键菜单;
- 使用 HTML 元素搭建一个菜单列表,并响应鼠标点击事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Custom Context Menu</title> <style type="text/css"> * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: gainsboro; } .context-menu { background-color: rgba(240, 240, 240, 1); border-color: rgba(0, 0, 0, 0.4); border-style: solid; border-width: 1px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); padding: 4px; position: fixed; width: 200px; } .context-menu-item { --height: 30px; cursor: pointer; height: var(--height); line-height: var(--height); list-style: none; padding-left: 5px; vertical-align: middle; transition-duration: 0.8s; transition-property: background-color; user-select: none; } .context-menu-item:hover { background-color: rgba(255, 255, 255, 1); } p { margin: 10px; } </style> </head> <body> <p> <span>The oncontextmenu property of the GlobalEventHandlers mixin is an event handler that processes contextmenu events.</span> <br> <span>The contextmenu event typically fires when the right mouse button is clicked on the window. Unless the default behavior is prevented, the browser context menu will activate.</span> </p> <p> <span>The onm ouseup property of the GlobalEventHandlers mixin is an event handler that processes mouseup events.</span> <br> <span>The mouseup event fires when the user releases the mouse button.</span> </p> <p> <span>In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized.</span> </p> </body> <script type="text/javascript"> // 鼠标左、右键标志,参考:https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent const MOUSE_LEFT_BUTTON = 0 const MOUSE_RIGHT_BUTTON = 2 window.onload = (event) => { console.log(event); main(); } function main() { let menu = null; window.oncontextmenu = (event) => { // 禁用原始鼠标右键菜单 // console.log(event); // event.preventDefault(); return false; } document.onmouseup = (event) => { console.log(event); // console.log(event.clientX, event.clientY); if(event.button === MOUSE_RIGHT_BUTTON) { // 鼠标右键 if(menu !== null) { document.body.removeChild(menu); // 移除菜单 } menu = document.createElement("ul"); // 菜单 menu.className = "context-menu"; menu.style.top = event.clientY + "px"; menu.style.left = event.clientX + "px"; const item0 = document.createElement("li"); // 菜单子项 0 item0.innerText = "个性化"; item0.className = "context-menu-item"; const item1 = document.createElement("li"); // 菜单子项 1 item1.innerText = "显示设置"; item1.className = "context-menu-item"; menu.appendChild(item0); // 添加菜单子项 menu.appendChild(item1); document.body.appendChild(menu); // 添加(展现)菜单 } else if(event.button === MOUSE_LEFT_BUTTON) { // 鼠标左键 if(menu !== null) { document.body.removeChild(menu); // 移除菜单 menu = null; } const target = event.target; // 获取被鼠标左键点击的目标 if(target.className === "context-menu-item") { alert(target.innerText); } } } document.onmousedown = (event) => { // console.log(event); } } </script> </html>
参考
js鼠标右键点击事件
Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.oncontextmenu
Web technology for developers > Web APIs > GlobalEventHandlers > GlobalEventHandlers.onmouseup
Web technology for developers > Web APIs > Document > Document.createElement()
Web technology for developers > Web APIs > Node > Node.removeChild()
Web technology for developers > Web APIs > HTMLElement > HTMLElement.style
Web technology for developers > Web APIs > Node > Node.appendChild()
Web technology for developers > Web APIs > MouseEvent > MouseEvent()
Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > ul: The Unordered List element
Web technology for developers > Web APIs > HTMLUListElement
Web technology for developers > HTML: HyperText Markup Language > HTML elements reference > li: The List Item element
Web technology for developers > Web APIs > HTMLLIElement
Web technology for developers > CSS: Cascading Style Sheets > list-style
Web technology for developers > Web APIs > Element > Element.className
Web technology for developers > CSS: Cascading Style Sheets > transition
这篇关于JavaScript - 自定义鼠标右键菜单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)