how to write your own right click menu and disable the default using jquery/javascript
-
11-09-2019 - |
Question
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")?
Solution
There are various jQuery context menu plugins out there, ready to use:
OTHER TIPS
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>
There is this plugin too: Audero Context Menu. It is free and very simple to use.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow