How to hide Firefox context menu to show my own menu instead?


Tags: javascript,html,css,firefox,contextmenu

Problem :

Using a div, I created a menu that must appear when the user right-clicks the first row of a table:

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/

I can't reproduce the error in the fiddle above, but it happens on my Firefox/Ubuntu. (In the fiddle, the console says "showMenu is not defined" -- is this usual behavior for javascript in jsfiddle.net? Because the function is there on the Javascript panel!).

What is happening is: without this line

    div.style.display = 'block';

Firefox's context menu don't show up. That's what I want, and I get it because of the onContextMenu='return false'. But when I add

    div.style.display = 'block';

it shows both, my div-menu and Firefox context menu! Why is that? I've tried other commands to hide the context menu, but it keeps showing. I tried all of the below, isolated and mixed:

e.preventDefault();
if (event.stopPropagation)
    event.stopPropagation();
event.cancelBubble = true;
return false;

So, how do I hide the default context menu to show my own menu instead?



Solution :

You are displaying the menu in a onmousedown handler and hiding the native menu in a oncontextmenu handler. The spec doesn't say whether one should run before the other.

What happens is that in Firefox, the onmousedown handler runs first, so your custom menu shows up, and then the oncontextmenu runs on your custom menu that appeared. There is no return false in that element, so the native menu shows up.

You need to trigger your custom menu inside the oncontextmenu handler:

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

PS: export the showMenu function in the JS tab so that it can be used outside of that tab (window.showMenu = showMenu).


    CSS Howto..

    How should I escape image URLs for CSS?

    How to scroll jQuery ui tabs?

    How can I make an unclickable HTML “Ghost” Div?

    how to arrange divs with css as a grid?

    How to default a custom-styled dropdown to browser default style dropdown

    How to make bootstrap btn-group break into half naturally

    how to colour user selected option using CSS in Firefox

    How do I align tables with HTML?

    How to embed video on my first website

    How do I get 3 horizontal divs to stack in different vertical order or flow when browser width decreases?

    How to add image and change visibility on hover CSS

    How to auto margin-left for the message bar

    how to vertically center align div elements with contents other than text

    How can I easily copy the whole CSS file from a website?

    How do people make sections in HTML pages? [closed]

    How to know if an element's width is absolute or relative?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How to override a property set in an id (CSS)

    How to add/insert json data[0] etc to/in jquery $('td').css?

    How to Make
    • as structured

    How to hide hr inside the last li using css

    CSS and jQuery current links navigation: how to update the
  • class
  • How can I set my image's hover when hovering my text?

    JQuery JQGrid - how to CSS right/left align without touching the grid lines?

    CSS - 2 divs side-by-side, one floated - how do I make the other fit next to it without overlapping?

    How to have a box increase its size based on its content?

    How can I read a CSS property value using Javascript?

    How do you structure css files for a web project?

    How do I add custom fonts? [duplicate]

    I'm acquiring a VARCHAR variable through php, and want to show it using HTML/CSS. How do I auto format it so that it isn't one long sentence