右键单击Javascript切换默认和自定义上下文菜单

戈里夫

当用户右键单击页面上的某些元素(即表格)时,我想显示一个自定义的conext菜单。截至目前,我同时具有自定义和默认上下文菜单显示。

function element_right_clicked(sender,e){
if(e.which == 3){
      // code here that displays custom menu
      sender.addEventListener("contextmenu", e => {
        e.preventDefault();
    });
  }
}

我正在寻找一种方法,在显示自定义项时不显示默认菜单。

斯科特·马库斯(Scott Marcus)

只需将处理程序设置为仅对需要显示自定义菜单的那些元素进行处理即可。通过将类应用于应该使用自定义菜单的任何元素,然后在文档级别侦听右键单击并利用事件委托,可以轻松地实现此目的

下面的红色项目已配置为自定义右键单击。

let modal = document.getElementById("contextMenu");

// Set up an event handler for the documnt right click
document.addEventListener("contextmenu", function(event) {
  // Only do something when the element that was actually right-clicked
  // on has the right class to trigger the menu
  if(event.target.classList.contains("customMenu")){
    event.preventDefault();
    modal.classList.remove("hidden");
  }
});

// Close the menu when you left click anywhere
document.addEventListener("click", function(event){
  modal.classList.add("hidden");
});
.hidden {display:none;}
.customMenu { font-weight:bold; color:#f00; }
#contextMenu {
  position:absolute; 
  border:2px double #333; 
  width:150px; 
  height:175px;
  top:20%;
  left:30%;
  background-color:#e0e0e0;
  box-shadow:5px 5px #909090;
}
<div class="customMenu">1</div>
<div id="one">2</div>
<div class="customMenu">3</div>
<div>4</div>
<div>5
  <span class="customMenu">6</span>
</div>
<div>6
  <h1>7
    <div class="customMenu">8</div>
  </h1>
</div>
<div class="customMenu">9</div>

<div id="contextMenu" class="hidden">
  <ul>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
    <li>menu item</li>
  </ul>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自定义Excel右键单击上下文菜单被Quick Analysis默认设置覆盖

来自分类Dev

右键单击svg元素的自定义上下文菜单位置

来自分类Dev

可以自定义终端上下文(右键单击)菜单吗?

来自分类Dev

右键单击文件夹时,上下文菜单中的自定义项

来自分类Dev

禁用右键单击上下文菜单?

来自分类Dev

右键单击Android上下文菜单

来自分类Dev

右键单击上下文菜单

来自分类Dev

创建简单的自定义上下文菜单命令-如何运行使用右键单击的文件路径/名称的VB脚本?

来自分类Dev

如何获得自定义右键单击上下文菜单以显示指向我网站上页面的两个链接?

来自分类Dev

主顶部菜单和右键单击上下文菜单之间的WPF共享菜单

来自分类Dev

无法使用 jQuery.toggle() 以编程方式切换(仅关闭)Highchart 的默认上下文菜单

来自分类Dev

TensorFlow设备上下文,流和上下文切换

来自分类Dev

上下文切换

来自分类Dev

TypeScript中的JsTree自定义上下文菜单

来自分类Dev

TinyMCE4 CTRL +右键单击以打开浏览器的默认上下文菜单

来自分类Dev

右键单击 Google Chrome 的顶部栏不显示默认上下文菜单

来自分类Dev

自定义Windows上下文菜单外壳程序命令目标文档:* .docx和* .pdf

来自分类Dev

右键单击添加上下文菜单。

来自分类Dev

使用Java禁用上下文菜单(右键单击)

来自分类Dev

右键单击添加上下文菜单。

来自分类Dev

右键单击上下文菜单长按Qt

来自分类Dev

AutoHotkey脚本,用于“右键单击上下文菜单”命令

来自分类Dev

AutoHotkey脚本,用于“右键单击上下文菜单”命令

来自分类Dev

右键单击上下文菜单后,获取选定的项目

来自分类Dev

Python IDLE从右键单击上下文菜单中消失了

来自分类Dev

仅在桌面添加右键单击上下文菜单

来自分类Dev

在 React 中禁用 Firefox 的右键单击上下文菜单

来自分类Dev

禁用上下文菜单和右键菜单

来自分类Dev

Windows 10 - 右键单击上下文菜单和设置应用程序冻结/挂起

Related 相关文章

  1. 1

    自定义Excel右键单击上下文菜单被Quick Analysis默认设置覆盖

  2. 2

    右键单击svg元素的自定义上下文菜单位置

  3. 3

    可以自定义终端上下文(右键单击)菜单吗?

  4. 4

    右键单击文件夹时,上下文菜单中的自定义项

  5. 5

    禁用右键单击上下文菜单?

  6. 6

    右键单击Android上下文菜单

  7. 7

    右键单击上下文菜单

  8. 8

    创建简单的自定义上下文菜单命令-如何运行使用右键单击的文件路径/名称的VB脚本?

  9. 9

    如何获得自定义右键单击上下文菜单以显示指向我网站上页面的两个链接?

  10. 10

    主顶部菜单和右键单击上下文菜单之间的WPF共享菜单

  11. 11

    无法使用 jQuery.toggle() 以编程方式切换(仅关闭)Highchart 的默认上下文菜单

  12. 12

    TensorFlow设备上下文,流和上下文切换

  13. 13

    上下文切换

  14. 14

    TypeScript中的JsTree自定义上下文菜单

  15. 15

    TinyMCE4 CTRL +右键单击以打开浏览器的默认上下文菜单

  16. 16

    右键单击 Google Chrome 的顶部栏不显示默认上下文菜单

  17. 17

    自定义Windows上下文菜单外壳程序命令目标文档:* .docx和* .pdf

  18. 18

    右键单击添加上下文菜单。

  19. 19

    使用Java禁用上下文菜单(右键单击)

  20. 20

    右键单击添加上下文菜单。

  21. 21

    右键单击上下文菜单长按Qt

  22. 22

    AutoHotkey脚本,用于“右键单击上下文菜单”命令

  23. 23

    AutoHotkey脚本,用于“右键单击上下文菜单”命令

  24. 24

    右键单击上下文菜单后,获取选定的项目

  25. 25

    Python IDLE从右键单击上下文菜单中消失了

  26. 26

    仅在桌面添加右键单击上下文菜单

  27. 27

    在 React 中禁用 Firefox 的右键单击上下文菜单

  28. 28

    禁用上下文菜单和右键菜单

  29. 29

    Windows 10 - 右键单击上下文菜单和设置应用程序冻结/挂起

热门标签

归档