JavaScript 检测右键

在网页开发中，有时我们需要禁用右键菜单，或在右键菜单中添加自定义选项。为此，需要使用 JavaScript 来检测右键事件。

检测右键事件

要检测右键事件，可以使用 contextmenu 事件。这个事件在用户右键单击时触发。

document.addEventListener('contextmenu', function(event) {
  // 右键事件处理代码
});

在事件处理代码中，可以使用 event.preventDefault() 来阻止右键菜单的默认行为，或使用 event.stopPropagation() 来阻止事件冒泡。

禁用右键菜单

如果要禁用右键菜单，可以在 contextmenu 事件处理代码中使用 event.preventDefault()。

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();
});

自定义右键菜单

如果要自定义右键菜单，可以在 contextmenu 事件处理代码中创建一个自定义菜单，并使用 event.preventDefault() 阻止默认的右键菜单出现。

document.addEventListener('contextmenu', function(event) {
  event.preventDefault();

  var menu = document.createElement('div');
  menu.style.position = 'absolute';
  menu.style.top = event.clientY + 'px';
  menu.style.left = event.clientX + 'px';
  document.body.appendChild(menu);

  // 添加菜单项
  var item1 = document.createElement('div');
  item1.textContent = '菜单项 1';
  menu.appendChild(item1);
  
  var item2 = document.createElement('div');
  item2.textContent = '菜单项 2';
  menu.appendChild(item2);
  
  // 添加菜单项点击事件
  item1.addEventListener('click', function() {
    alert('菜单项 1 被点击了！');
  });
  
  item2.addEventListener('click', function() {
    alert('菜单项 2 被点击了！');
  });
});

参考链接

• MDN Web 文档：contextmenu 事件