Question

通过事件处理程序

禁用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
})

＆＃13;

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

＆＃13;

div {
  height: 100px;
  width: 100px;
  border: 1px solid black;
}

#test1 {
  background-color: red;
}

#test2 {
  background-color: blue;
}

＆＃13;

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

＆＃13;

右键单击test1将成功禁用，但不会test2，控制台会证明程序控件确实已到达处理程序。

我不是在寻找解决方法

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

let test = document.getElementById('test')

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

完美无缺。

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

Answer 1

这是奇怪的行为。出于某种原因，来自return false的{{1}}不起作用（在最新的稳定版Chrome中测试）。您需要调用.addEventListener方法，如下所示和返回.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;
}

通过添加事件监听器来禁用上下文菜单（右键单击中显示的选项）并不起作用

通过事件处理程序

1 个答案: