要在 HTML 页面中自定义右键菜单,可以使用 JavaScript 实现。下面是一个简单的例子:
首先,在 <head>
标签中插入以下代码来禁用默认的浏览器右键菜单:
<script>
// 禁用右键菜单
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
</script>
然后,在 <body>
标签中插入以下代码来创建并显示自定义的右键菜单:
<div id="custom-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>
<script>
var menu = document.getElementById('custom-menu');
// 右键点击事件处理
document.addEventListener('contextmenu', function (event) {
event.preventDefault();
// 显示自定义菜单
menu.style.display = 'block';
menu.style.left = event.pageX + 'px';
menu.style.top = event.pageY + 'px';
});
// 单击页面任意位置隐藏菜单
document.addEventListener('click', function () {
menu.style.display = 'none';
});
</script>
这个例子创建了一个带有三个菜单项的自定义右键菜单,并在右键点击时显示菜单。当在页面的其他位置单击时,菜单将隐藏起来。你可以根据需要修改菜单项的内容和样式。
标签:菜单,自定义,menu,00004,右键,菜单项,event From: https://www.cnblogs.com/virtulreal/p/17588985.html