Question

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

HTML

Triple

的Javascript

<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>

CSS

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';
}

JSFiddle：https://jsfiddle.net/q5brjfyw/

我无法在上面的小提琴中重现错误，但它发生在我的Firefox / Ubuntu上。（在小提琴中，控制台说＆＃34; showMenu没有被定义＆＃34; - 这是jsfiddle.net中javascript的常见行为吗？因为Javascript面板上有这个函数！）。

发生的事情是：没有这一行

table {
  border: 1px solid black;
}
tr:nth-child(odd) {
  background-color: #CCFFCC;
}
.mnuTable {
    background-color: #90A090;
    position:absolute;
}

Firefox的上下文菜单不会显示。这就是我想要的东西，因为div.style.display = 'block';而得到它。但是当我添加

onContextMenu='return false'

它显示了我的div菜单和Firefox上下文菜单！这是为什么？我已经尝试过其他命令来隐藏上下文菜单，但它会一直显示。我尝试了以下所有内容，分离和混合：

    div.style.display = 'block';

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

Answer 1

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

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

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

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

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

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

1 个答案: