2015-12-21 57 views
1

使用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; 

那么,如何隐藏默认的上下文菜单,让我的菜单呢?

+0

仅供参考,有关showMenu问题... http://stackoverflow.com/a/16160752/2647442在'console' – Marie

+0

任何其他错误? –

+0

@MoshFeu在我的程序中根本没有错误。在jsfiddle中,加载时有很多蓝色的感叹号,但是单击表格时只有这个引用错误。 – Rodrigo

回答

3

您在onmousedown处理程序中显示菜单,并在oncontextmenu处理程序中隐藏本地菜单。规范并没有说明是否应该在另一个之前跑。

发生什么事是,在Firefox中,onmousedown处理程序首先运行,因此您的自定义菜单显示,然后oncontextmenu运行在出现的自定义菜单上。该元素中没有return false,所以显示原生菜单。

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

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

PS:出口showMenu功能的JS标签,以便它可以在标签(window.showMenu = showMenu)之外使用。

+0

谢谢,matteodelabre,它的工作! – Rodrigo