通过添加事件监听器禁用上下文菜单（在右键单击时看到的选项）无效。

Question

通过事件处理程序禁用contextmenu

我想要禁用一个元素的右键单击。我找到了一个解决方案，可以这样做：

<div oncontextmenu='return false'></div>

但是在html中使用事件处理程序并不是一个好的实践，因此我尝试了以下方法：

<div id='test'></div>

在代码的 JavaScript 部分：

let test = document.getElementById('test')

test.addEventListener('contextmenu', (e) => {
  console.log('right click!')
  return false
})

let test2 = document.getElementById('test2')

test2.addEventListener('contextmenu', (e) => {
  console.log('right click!')
  return false
})

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#test1 {
  background-color: red;
}

#test2 {
  background-color: blue;
}

<div id='test1' oncontextmenu='return false'></div>
<div id='test2'></div>

右键点击test1将被成功禁用，但不包括test2，控制台证明程序控制已到达处理程序。

---

我不是在寻找解决方法。

<div id='test'></div>

let test = document.getElementById('test')

test.addEventListener('contextmenu', (e) => {
  e.preventDefault()
  console.log('right click!')
})

完美运作。

---

我想知道，为什么上面代码片段中的两个元素表现不同？

- Amresh Venugopal

Answer 1

这是一种奇怪的行为。由于某种原因，在最新稳定版的Chrome中，从.addEventListener返回false不起作用。您需要调用下面展示的.preventDefault()方法并返回false才能在现代和古老的浏览器中获得所需的效果。右键单击将在控制台中记录，但没有上下文菜单显示。

请注意，我添加了一些分号以使样式更加规范。虽然在您的示例中它们在技术上不是必需的，但包含它们是一个好习惯。

let test2 = document.getElementById('test2')

test2.addEventListener('contextmenu', (e) => {
  console.log('right click!');
  e.preventDefault();//===added this===
  return false;
});

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#test1 {
  background-color: red;
}

#test2 {
  background-color: blue;
}

<div id='test1' oncontextmenu='return false'></div>
<div id='test2'></div>

- user6560716