Para detectar o click do mouse direito utilizei o addEventListener e attachEvent
desta forma a solução fica cross-browser.
Neste exemplo abro um simples menu, apenas removendo o display:none;
Exemplo:
var menu = $('.menu');
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
menu.css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show();
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
menu.css({
"margin-left": e.clientX,
"margin-top": e.clientY
}).show();
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<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>
Veja funcionando no jsfiddle