javascript - 通过添加事件监听器禁用contextmenu(右键单击时显示的选项)不起作用

通过事件处理程序禁用contextmenu
我正在尝试禁用元素上的右键单击。我找到了一个解决方案，它像这样:

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

完美地工作。

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

最佳答案

这是奇怪的行为。由于某种原因，return false中的.addEventListener不起作用(已在最新的稳定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>

关于javascript - 通过添加事件监听器禁用contextmenu(右键单击时显示的选项)不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42749224/