右键菜单的代码
时间: 2023-07-02 17:23:33 浏览: 68
以下是一个简单的右键菜单的 HTML 和 JavaScript 代码:
```html
<div id="menu" style="display: none;">
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
</ul>
</div>
```
```javascript
document.addEventListener('contextmenu', function(event) {
event.preventDefault(); // 阻止默认右键菜单
var menu = document.getElementById('menu');
menu.style.display = 'block';
menu.style.left = event.pageX + 'px';
menu.style.top = event.pageY + 'px';
});
document.addEventListener('click', function(event) {
var menu = document.getElementById('menu');
menu.style.display = 'none';
});
```
在这个代码中,我们首先定义了一个 `div` 元素用于显示右键菜单,设置了 `display: none;` 隐藏菜单。然后在 `contextmenu` 事件中,阻止默认右键菜单并显示自定义菜单,并设置菜单的位置。在 `click` 事件中,隐藏菜单。需要注意的是,这个代码只是一个简单的例子,实际上右键菜单的实现可能会更加复杂,例如需要根据不同的元素显示不同的菜单等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)