js实现右击页面
监听右击事件
使用 contextmenu 事件监听右击动作，通过 event.preventDefault() 阻止默认右键菜单：
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
console.log('右击事件触发');
});自定义右键菜单
创建自定义菜单元素，通过事件对象的 clientX 和 clientY 定位：
const menu = document.createElement('div');
menu.style.position = 'fixed';
menu.style.display = 'none';
menu.style.backgroundColor = '#fff';
menu.style.border = '1px solid #ccc';
menu.innerHTML = '<p>自定义菜单项</p>';
document.body.appendChild(menu);
document.addEventListener('contextmenu', function(event) {
event.preventDefault();
menu.style.left = `${event.clientX}px`;
menu.style.top = `${event.clientY}px`;
menu.style.display = 'block';
});
// 点击其他区域关闭菜单
document.addEventListener('click', () => {
menu.style.display = 'none';
});兼容性处理
检查浏览器是否支持 contextmenu 事件，并处理移动端长按模拟右击的情况：
if ('oncontextmenu' in window) {
// 标准浏览器支持
} else {
// 备用方案（如旧版IE）
}动态生成菜单项
通过数据动态生成菜单内容，支持事件委托：
const menuItems = [
{ text: '复制', action: () => console.log('复制') },
{ text: '粘贴', action: () => console.log('粘贴') }
];
menu.innerHTML = menuItems.map(item =>
`<div class="menu-item">${item.text}</div>`
).join('');
menu.addEventListener('click', (e) => {
const index = [...menu.children].indexOf(e.target);
if (index >= 0) menuItems[index].action();
});样式优化
为菜单添加CSS样式提升交互体验：
.menu-item {
padding: 8px 12px;
cursor: pointer;
}
.menu-item:hover {
background-color: #f0f0f0;
}
