当前位置：首页 > JavaScript

js实现右键

2026-03-15 00:06:25JavaScript

监听右键点击事件

使用 contextmenu 事件监听右键点击。通过 addEventListener 绑定事件，event.preventDefault() 阻止默认右键菜单弹出。

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log('右键被点击');
});

自定义右键菜单

创建一个隐藏的 div 元素作为自定义菜单，通过事件对象的 clientX 和 clientY 动态定位菜单位置。

const menu = document.createElement('div');
menu.style.display = 'none';
menu.style.position = 'absolute';
menu.style.backgroundColor = '#fff';
menu.style.border = '1px solid #ccc';
menu.innerHTML = '<ul><li>选项1</li><li>选项2</li></ul>';
document.body.appendChild(menu);

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  menu.style.display = 'block';
  menu.style.left = `${event.clientX}px`;
  menu.style.top = `${event.clientY}px`;
});

document.addEventListener('click', function() {
  menu.style.display = 'none';
});

添加菜单功能

为菜单项绑定点击事件处理逻辑，实现具体功能。通过事件委托或直接绑定均可。

menu.querySelector('ul').addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    alert(`选择了: ${e.target.textContent}`);
    menu.style.display = 'none';
  }
});

兼容移动端触摸事件

在移动设备上模拟右键行为，通常通过长按触摸实现。监听 touchstart 和 touchend 事件判断长按动作。

let touchTimer;
document.addEventListener('touchstart', function() {
  touchTimer = setTimeout(() => {
    console.log('长按触发右键');
  }, 800);
});

document.addEventListener('touchend', function() {
  clearTimeout(touchTimer);
});

动态生成菜单内容

根据点击位置或元素类型动态生成不同的菜单选项。通过检查事件目标的 class 或 id 实现条件渲染。

js实现右键

document.addEventListener('contextmenu', function(event) {
  const target = event.target;
  if (target.classList.contains('editable')) {
    menu.innerHTML = '<ul><li>复制</li><li>粘贴</li></ul>';
  } else {
    menu.innerHTML = '<ul><li>刷新</li><li>返回</li></ul>';
  }
});