悠悠楠杉
网站页面
Flex自定义右键菜单具体实现，flex布局右浮动
06/01
1. 基础HTML结构
首先，我们定义一个基本的HTML结构，其中包含一些可以触发右键菜单的元素：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自定义右键菜单示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="content">
<p>右键点击我试试!</p>
<div>更多内容</div>
<a href="#">链接示例</a>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS样式（style.css）
我们使用Flexbox来布局右键菜单，使其美观且适应不同的屏幕尺寸：
```css
contextMenu {
display: flex;
flex-direction: column;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
padding: 10px;
z-index: 1000;
}
contextMenu div {
padding: 10px;
cursor: pointer;
}
contextMenu div:hover {
background-color: #e9e9e9;
}
```
3. JavaScript实现（script.js）
接下来，我们编写JavaScript来捕捉右键事件，并显示自定义的菜单：
javascript
document.addEventListener('contextmenu', function(e) {
e.preventDefault(); // 阻止默认的右键菜单显示
var menu = document.getElementById('contextMenu'); // 获取菜单元素
menu.style.display = 'block'; // 显示菜单
menu.style.left = e.pageX + 'px'; // 设置菜单位置为鼠标位置X轴上加上一些偏移量以避免覆盖目标元素内部区域或对齐问题（可选）
menu.style.top = e.pageY + 'px'; // 同上，对于Y轴位置的设置（可选）
}, false);
同时，我们还需要一个方法来处理菜单的关闭事件，通常是在点击任何非菜单项的内容时：
```javascript
document.addEventListener('click', function(e) { // 监听点击事件以关闭菜单（除菜单项外的点击）
var menu = document.getElementById('contextMenu'); // 获取菜单元素并检查点击的是否为它的一部分（若不是，则隐藏）
if (e.target !== menu && !menu.contains(e.target)) { // 如果点击的是除了菜单外的其他地方则隐藏菜单
menu.style.display = 'none'; // 隐藏菜单项 防止过多点击引起的干扰问题（可选）}
});
