右击后只显示浏览器的菜单 未显示页面自定义的功能菜单
时间: 2024-03-12 20:46:45 浏览: 14
这可能是因为浏览器默认会显示自己的右键菜单,如果你想要使用自定义的右键菜单,可以在 `contextmenu` 事件中使用 `preventDefault()` 方法阻止浏览器默认菜单的弹出。
以下是一个修改后的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右击菜单</title>
<style>
/* 菜单样式 */
menu {
position: absolute;
background-color: white;
border: 1px solid gray;
padding: 5px;
display: none;
z-index: 999;
}
menuitem {
display: block;
padding: 2px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<p>这是一段文本,可以右击选择。</p>
<menu id="menu">
<menuitem id="copy">复制</menuitem>
<menuitem id="cut">剪切</menuitem>
<menuitem id="paste">粘贴</menuitem>
</menu>
<script>
// 获取菜单和菜单项
const menu = document.getElementById('menu');
const copy = document.getElementById('copy');
const cut = document.getElementById('cut');
const paste = document.getElementById('paste');
// 监听右击事件
document.addEventListener('contextmenu', function(e) {
e.preventDefault(); // 阻止默认右击事件
// 显示菜单
menu.style.display = 'block';
menu.style.left = e.clientX + 'px';
menu.style.top = e.clientY + 'px';
// 监听菜单项的点击事件
copy.addEventListener('click', function() {
document.execCommand('copy'); // 执行浏览器自带的复制命令
menu.style.display = 'none'; // 隐藏菜单
});
cut.addEventListener('click', function() {
document.execCommand('cut'); // 执行浏览器自带的剪切命令
menu.style.display = 'none'; // 隐藏菜单
});
paste.addEventListener('click', function() {
document.execCommand('paste'); // 执行浏览器自带的粘贴命令
menu.style.display = 'none'; // 隐藏菜单
});
});
</script>
</body>
</html>
```
在这个示例中,我们使用了 `preventDefault()` 方法来阻止浏览器默认右键菜单的弹出,只显示我们自定义的菜单。