Context menu

Question

How can I create context menu items in chrome using html and JavaScript?
I know you can use Firefox’s contextmenu:
<div oncontextmenu=“function()” contextmenu=“Id name for future reference”></div>
But this does not work for any other browser.
Anybody with the same problem or solutions.
Only JavaScript, html.

Thanks

Answer 1

You can't edit the original context menu. You need to create your own.

<div class="parent" oncontextmenu="menu(event)">
<div class="contextmenu" id="contextmenu">
<ul>
<li>Item</li>
</ul>
</div>
</div>

.parent {
position: relative;
}
.parent .contextmenu {
position: absolute;
display: none;
}

function menu(event) {
var menu = document.getElementById("contextmenu");
menu.style.left = event.offsetX + "px";
menu.style.top = event.offsetY + "px";
menu.style.display = "block";
event.preventDefault();
}

Answer 2

I was just using the name “function()” and “id name for future reference” as examples. I am more interested in how to change/add items to the context menu

Answer 3

Ok that makes a lot of sense. Thank you Toni Isotalo and Nomeh Uchenna Gabriel. That’s really helpful. Thanks!

Answer 4

context menu works well on an item only if it's "user-select" css property was set to "none"