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

Question

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

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/

我无法重现上述 fiddle 中的错误，但它发生在我的 Firefox/Ubuntu 中。（在 fiddle 中，控制台显示 "showMenu is not defined" -- 这是 javascript 在 jsfiddle.net 中的常见行为吗？因为该函数在 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;

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

Answer 1

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

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

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

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

PS: 导出 JS 选项卡中的 showMenu 函数，以便它可以在该选项卡之外使用 (window.showMenu = showMenu)。

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

How to hide Firefox context menu to show my own menu instead?

html

javascript

css

firefox

contextmenu