如何隱藏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/

我無法在上面的小提琴中重現錯誤，但它發生在我的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;

那么，如何隱藏默認上下文菜單以顯示我自己的菜單呢？

Answer 1

您正在onmousedown處理程序中顯示菜單，並將本機菜單隱藏在oncontextmenu處理程序中。 規范沒有說明一個人是否應該在另一個之前運行。

會發生的情況是，在Firefox中， onmousedown處理程序首先運行，因此您的自定義菜單會顯示，然后oncontextmenu在您出現的自定義菜單上運行。 該元素中沒有return false ，因此顯示本機菜單。

您需要在oncontextmenu處理程序中觸發自定義菜單：

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

PS：在JS選項卡中導出showMenu函數，以便可以在該選項卡之外使用它（ window.showMenu = showMenu ）。