首页写一个html实现仿浏览器右击菜单栏功能

写一个html实现仿浏览器右击菜单栏功能

时间: 2023-07-20 22:35:43 浏览: 82

好的，以下是一个简单的 HTML 和 JavaScript 实现仿浏览器右击菜单栏功能的示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿浏览器右击菜单栏功能</title> <style> #context-menu { display: none; position: absolute; background-color: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 6px #ccc; padding: 4px; z-index: 9999; } #context-menu ul { list-style: none; margin: 0; padding: 0; } #context-menu li { cursor: pointer; padding: 4px 8px; } #context-menu li:hover { background-color: #f0f0f0; } </style> </head> <body> <p>右击此处显示菜单</p> <div id="context-menu"> <ul> <li>菜单项1</li> <li>菜单项2</li> <li>菜单项3</li> </ul> </div> <script> const contextMenu = document.querySelector('#context-menu'); const menuTrigger = document.querySelector('p'); window.addEventListener('contextmenu', e => { e.preventDefault(); contextMenu.style.display = 'block'; contextMenu.style.left = e.pageX + 'px'; contextMenu.style.top = e.pageY + 'px'; }); document.addEventListener('click', e => { if (!contextMenu.contains(e.target)) { contextMenu.style.display = 'none'; } }); </script> </body> </html> ``` 在这个示例中，我们首先定义了一个隐藏的菜单 DIV 元素，用来放置需要显示的菜单项。接着在 CSS 中定义了菜单元素的样式，包括了边框、背景色、阴影、内边距等。然后在 JavaScript 中，我们获取了菜单元素和触发菜单的元素，分别监听了鼠标右击和鼠标左击事件。当鼠标右击时，我们阻止了默认事件，并显示菜单元素在鼠标位置；当鼠标左击时，如果点击的不是菜单元素，则隐藏菜单元素。

阅读全文