javascript - 通过添加事件监听器禁用上下文菜单(右键单击时看到的选项)不起作用

Question

通过事件处理程序禁用上下文菜单

我正在尝试禁用右键单击某个元素。我找到了一个解决方案，它是这样的:

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

但是由于在 html 中使用事件处理程序不是一个好的做法，我尝试了类似的方法:

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

在代码的js部分:

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!')
})

完美运行。

---

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

Answer 1

这是奇怪的行为。出于某种原因，.addEventListener 的 return false 不起作用(在最新的稳定 chrome 中测试)。您需要调用 .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>