When we right click on certain areas of the page the default PopUp of browsers appears:
I'd like to showcase my own custom PopUps !
Is it possible to intercept the click and open a different menu?
Note: I have JavaScript preference, but if the solution is in JQuery will be welcome!
To detect the right mouse click, I used addEventListener e attachEvent so the solution gets cross-browser.
In this example I open a simple menu, just removing display:none;
var menu = document.querySelectorAll(".menu");
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
menu[0].style.display = 'block';
menu[0].style.marginLeft = e.clientX + 'px';
menu[0].style.marginTop = e.clientY + 'px';
window.event.returnValue = false;
});
}ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
display: none;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}<ul class="menu">
<li><a href="#">Item 1</a>
</li>
<li><a href="#">Item 2</a>
</li>
<li><a href="#">Item 3</a>
</li>
<li><a href="#">Item 4</a>
</li>
</ul>See working at jsfiddle
Well, I use it on my site, the complete code is this:
<!DOCTYPE html>
<html lang="br">
<head>
<meta charset="utf-8">
<title>Botão Direito</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script><style>.rightclickmenu{border:1pxsolid#000;position:absolute;z-index:1;font:11pxsans-serif;display:none;}#rightclickobject{padding:10px;width:100px;border-bottom:1pxsolid#eee;cursor:pointer;}#rightclickobject:hover{background:#eee;}</style></head><body>Cliqueemmimouemqualquerlugardositecomobotãodireto<divclass="rightclickmenu">
<div id="rightclickobject" onclick="window.open('http://www.exatas.tk')">Portal de Exatas</div>
<div id="rightclickobject" onclick="window.open('http://pt.stackoverflow.com/users/38968/vme?tab=profile')">Vme SOpt</div>
<div id="rightclickobject">Nada</div>
<div id="rightclickobject" onclick="window.open('https://www.youtube.com/watch?v=kzOkza_u3Z8')">Baile de favela</div>
</div>
<script type="text/javascript">
window.addEventListener('contextmenu', function(e) {
$('.rightclickmenu').css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show()
e.preventDefault();
window.addEventListener('click', function(){
$('.rightclickmenu').hide();
})
})
</script>
</body>
</html> Result (almost all the buttons are linked, they work perfectly, but the S.O. system does not open the answer):
The way I know about creating a custom context menu is to prevent default browser behavior and to "design" the menu options with HTML and CSS. For example:
document.addEventListener('contextmenu', function(event){
event.preventDefault();
// Aqui você desenha e exibe seu menu feito com html/css.
}, false);Clique com o botão esquerdo.Then you get the position x and y from where the click event occurred and opens the menu from that point
In the specification there is a proposal that allows you to create menus for use in the whole page or in an element (div, section, etc) in specific. But currently supported only by Firefox. If you are using FF and running the snippet below, you will see that an option has been added in the context menu:
html, body { width: 100%; height: 100%; margin: 0; padding: 0 }<body contextmenu="sopt-menu">Clique com o botão direito <b>(somente FIREFOX)</b>.</body>
<menu type="context" id="sopt-menu">
<menuitem label="Homepage" icon="http://i.stack.imgur.com/QoVP1.png"></menuitem>
<menuitem label="Acessar o Meta" icon="http://i.stack.imgur.com/QoVP1.png"></menuitem>
<menu label="Compartilhar esta pergunta">
<menuitem label="Twitter" icon="http://i.stack.imgur.com/GcF12.png"></menuitem>
<menuitem label="Facebook" icon="http://i.stack.imgur.com/crcC5.png"></menuitem>
</menu>
</menu>For those who can not execute, the result is this:
$(document).mousedown(function(event) {
switch (event.which) {
case 1:
alert('Tecla Esquerda');
break;
case 2:
alert('Tecla do Meio');
break;
case 3:
alert('Tecla Direita');
break;
default:
alert('nope');
}
});
With this code you can detect which mouse button has been clicked. Now you just need to add code to the right side so that your popup appears. In principle this will help you.
I'm sorry for jQuery, but I just know that! By the way, if you want to use it, pick up that code and put it in the browser console. You will soon see the code running.
Best wishes and good luck!