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

Question

我使用 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/

我无法重现上面 fiddle 中的错误，但它发生在我的 Firefox/Ubuntu 上。 (在 fiddle 中，控制台显示“showMenu is not defined”——这是 jsfiddle.net 中 javascript 的常见行为吗？因为该函数在 Javascript 面板上!)。

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

    div.style.display = 'block';

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

    div.style.display = 'block';

它显示了我的 div-menu 和 Firefox 上下文菜单!这是为什么？我试过其他命令来隐藏上下文菜单，但它一直显示。我尝试了以下所有方法，隔离和混合:

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

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

Answer 1

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

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

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

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

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