Menu
I successfully disabled the right click event on the page that I am working on using jquery. I want to create a customize right click menu. How can I do this? Does this need relevant css setting to get it working (i.e. "position")?
528
div. addEventListener("contextmenu", ( e )=> { e. preventDefault(); return false; } ); This worked for me in FF and Chrome.
To make this HTML menu visible when right-clicking in the browser, we need to listen for contextmenu events. We can bind the event listener directly on the document or we can limit the area that a user can right-click to see the custom context menu. In our example, the area for right-click is the entire body element.
Disable right click menu in html page using jquery. JavaScript Code: $(document). bind("contextmenu",function(e){ return false; });
JavaScript code is used to block this default menu and then we will create our custom context menu. To block the default menu, we will add an event handler for processing right-click events on the webpage. We will use the oncontextmenu property to listen to the right-click events.
There are various jQuery context menu plugins out there, ready to use:
73
This example works, though it is cheesy. What you could do in your contextmenu handler is show a DIV at a specific location on the screen with items of your choosing. As far as I know, there is no way to customize the items within the context menu that appears when you right-click on elements.
<html>
<head>
<title>Context menu test</title>
<style type="text/css">
.element {
background-color: blue;
height: 300px;
width: 300px;
}
.popup {
background-color: red;
border: 1px solid black;
width: 100px;
height: 100px;
position: absolute;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".element").contextmenu
(
function(e) {
$("div.popup").remove();
$("<div class='popup'>Hi</div>").appendTo("body")
.css("left", e.pageX)
.css("top", e.pageY)
.show();
e.preventDefault(); // return false; also works
}
);
}
);
$.fn.contextmenu = function(func) {
return this.bind("contextmenu", func);
}
</script>
</head>
<body>
<div class="element"></div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
