7
When right-clicking on certain areas of the page appears the Popup browser default:
I’d like to show my own Popups customized!
It is possible to intercept the click and open a different menu?
Note: I prefer Javascript, but if the solution is in Jquery will be well received!
4
To detect the right mouse click I used the addEventListener e attachEvent this way the solution gets cross-browser.
In this example I open a simple menu, just by removing the 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 on jsfiddle
3
Well, I use 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: 1px solid #000;
position:absolute;
z-index:1;
font: 11px sans-serif;
display:none;
}
#rightclickobject {
padding: 10px;
width: 100px;
border-bottom: 1px solid #eee;
cursor:pointer;
}
#rightclickobject:hover {
background:#eee;
}
</style>
</head>
<body>
Clique em mim ou em qualquer lugar do site com o botão direto
<div class="rightclickmenu">
<div id="rightclickobject" onclick="window.open('http://www.exatas.tk')">Portal de Exatas</div>
<div id="rightclickobject" onclick="window.open('/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 buttons are link’s, work perfectly, but the S.O. system makes them not open in the answer):
+1 for help, really good!
Glad I could help.
2
$(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 key was clicked. Now you just need to add code to the right side in order to show your popup. In principle this will help you.
And I’m sorry about jQuery, but that’s all I know! By the way, if you want to try it, grab that code and put it in the browser console. You can see the running code right away.
Regards and good luck!
2
The way I know how to create a custom context menu is, prevent the default behavior of the browser and "draw" 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.And then you take the position x and y where the event of click and opens the menu from that point.
In the specification there is a proposal that allows you to create menus to be used throughout the page or in an element (div, Section, etc) in specific. But currently supported only by Firefox. If you are using FF and run 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 cannot perform, the result is this:
+1,Did not know this, too bad it is only compatible on Firefox.
@Renan, +1 thanks for the initiative, Ball show, a pity not to be to all browsers! Thank you!
Browser other questions tagged javascript jquery html css
You are not signed in. Login or sign up in order to post.
+1 today I need a solution for all browsers, the solution proposed by @Renan would be ideal, pity not be for everyone!
– Junior Moreira