如何隱藏Firefox上下文菜單來顯示我自己的菜單？

使用DIV，我創建當用戶右擊一個表格的第一行必須出現一個菜單：如何隱藏Firefox上下文菜單來顯示我自己的菜單？

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;

那麼，如何隱藏默認的上下文菜單，讓我的菜單呢？

來源

2015-12-21 Rodrigo

僅供參考，有關showMenu問題... http://stackoverflow.com/a/16160752/2647442在'console' – Marie

任何其他錯誤？ –

@MoshFeu在我的程序中根本沒有錯誤。在jsfiddle中，加載時有很多藍色的感嘆號，但是單擊表格時只有這個引用錯誤。 – Rodrigo

您在onmousedown處理程序中顯示菜單，並在oncontextmenu處理程序中隱藏本地菜單。規範並沒有說明是否應該在另一個之前跑。

發生什麼事是，在Firefox中，onmousedown處理程序首先運行，因此您的自定義菜單顯示，然後oncontextmenu運行在出現的自定義菜單上。該元素中沒有return false，所以顯示原生菜單。

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

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

PS：出口showMenu功能的JS標籤，以便它可以在標籤（window.showMenu = showMenu）之外使用。

來源

2015-12-21 14:48:10 matteodelabre

謝謝，matteodelabre，它的工作！ – Rodrigo

如何隱藏Firefox上下文菜單來顯示我自己的菜單？

回答

相關問題