如何隐藏 Firefox 上下文菜单以显示我自己的菜单？答案

【问题标题】：How to hide Firefox context menu to show my own menu instead?如何隐藏 Firefox 上下文菜单以显示我自己的菜单？
【发布时间】：2015-12-21 22:48:10
【问题描述】：

使用 div，我创建了一个必须在用户右键单击表格的第一行时出现的菜单：

HTML

<table>
  <tr onMouseDown='showMenu(event)' onContextMenu='return false'>
    <td>First row</td>
  </tr>
  <tr>
    <td>Second row</td>
  </tr>
</table>
<div id='divMnuTable' style='display:none' class='mnuTable'>Menu</div>

Javascript

function showMenu(e) {
    e = e || window.event;
    // get mouse coordinates
    var docEl = document.documentElement;
    var scrollLeft = docEl.scrollLeft || document.body.scrollLeft;
    var scrollTop  = docEl.scrollTop || document.body.scrollTop;
    var x = e.pageX || (e.clientX  + scrollLeft);
    var y = e.pageY || (e.clientY  + scrollTop);
    // show the menu
    var div = document.getElementById('divMnuTable');
    div.style.left = x+'px';
    div.style.top = y+'px';
    div.style.display = 'block';
}

CSS

table {
  border: 1px solid black;
}
tr:nth-child(odd) {
  background-color: #CCFFCC;
}
.mnuTable {
    background-color: #90A090;
    position:absolute;
}

JSFiddle：https://jsfiddle.net/q5brjfyw/

我无法重现上面小提琴中的错误，但它发生在我的 Firefox/Ubuntu 上。（在小提琴中，控制台显示“未定义 showMenu”——这是 jsfiddle.net 中 javascript 的常见行为吗？因为该函数在 Javascript 面板上！）。

发生的事情是：没有这条线

    div.style.display = 'block';

Firefox 的上下文菜单不显示。这就是我想要的，我得到它是因为onContextMenu='return false'。但是当我添加

    div.style.display = 'block';

它同时显示了我的 div 菜单和 Firefox 上下文菜单！这是为什么？我尝试了其他命令来隐藏上下文菜单，但它一直显示。我尝试了以下所有方法，孤立和混合：

e.preventDefault();
if (event.stopPropagation)
    event.stopPropagation();
event.cancelBubble = true;
return false;

那么，如何隐藏默认上下文菜单以显示我自己的菜单？

【问题讨论】：

仅供参考，关于 showMenu 问题...stackoverflow.com/a/16160752/2647442
console 中还有其他错误吗？
@MoshFeu 在我的程序中完全没有错误。在jsfiddle中，加载时有很多蓝色感叹号，但是当我点击表格时只有这个引用错误。
@Rodrigo 如果我不得不猜测，这只是一个猜测......我认为这不起作用的原因是您成功取消了子元素的上下文菜单，但父元素是仍然发射它的第一个。如果您真的想让它轻松工作，您可以为文档阻止它。 document.oncontextmenu = function (e) {e.preventDefault();return false;}
它在Javascript窗口右上角的齿轮下面。

标签： javascript html css firefox contextmenu

【解决方案1】：

您在onmousedown 处理程序中显示菜单，并在oncontextmenu 处理程序中隐藏本机菜单。规范没有说明一个是否应该在另一个之前运行。

发生的情况是，在 Firefox 中，onmousedown 处理程序首先运行，因此您的自定义菜单出现，然后oncontextmenu 在出现的自定义菜单上运行。该元素中没有return false，因此会显示本机菜单。

您需要在oncontextmenu 处理程序中触发您的自定义菜单：

<tr oncontextmenu="showMenu(event); return false;">

PS：在JS选项卡中导出showMenu函数，以便在该选项卡之外使用（window.showMenu = showMenu）。

【讨论】：