如何隐藏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上下文菜单来显示我自己的菜单？

回答

相关问题