Entry
How can I capture right mouse button events?
How can I capture right mouse button events?
Dec 14th, 2000 08:18
Martin Honnen,
When you click the right mouse button inside a browser window the so
called context menu comes up (as with several other application too).
It contains menu entries like back, view source or depending on the
element it was clicked on copy link location, copy image location, view
image.
Now in my view all attempts to hide the context menu to protect the
html source from viewing or images from being viewed are futile and
rather silly. But you might want to capture the right mouse button
event to have your own context menu come up.
IE5 has an own event handler for the context menu:
document.oncontextmenu =
function () {
return false;
};
Returning false simply cancels the default menu.
NN4 uses
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown =
function (evt) {
if (evt.which == 3)
return false;
};
where evt.which == 3 identifies the right mouse button and return false
cancels the default menu.
NN6 uses
document.onmouseup = function (evt) {
if (evt.button == 3)
event.preventDefault();
}
to prevent the default menu coming up.
Here is an example on how to popup your own context menu with NN4, NN6
and IE5 (the link, img and paragraph are just example content to check
the right click on):
<HTML>
<HEAD>
<STYLE>
#contextMenu {
position: absolute;
visibility: hidden;
width: 120px;
background-color: lightgrey;
layer-background-color: lightgrey;
border: 2px outset white;
}
</STYLE>
<SCRIPT>
if (document.all || document.getElementById) {
document.write('<STYLE>');
document.write('A.menu { color: black; text-decoration: none;'
+ ' cursor: default; width: 100%;}');
document.write('A.menuOn { color: white; '
+ 'background-color: darkblue; text-decoration: none;');
document.write(' cursor: default; width: 100%; }');
document.write('<\/STYLE>');
}
</SCRIPT>
<SCRIPT>
var menu;
function showMenu (evt) {
if (document.all) {
document.all.contextMenu.style.pixelLeft = event.clientX;
document.all.contextMenu.style.pixelTop = event.clientY;
document.all.contextMenu.style.visibility = 'visible';
return false;
}
else if (document.layers) {
if (evt.which == 3) {
document.contextMenu.left = evt.x;
document.contextMenu.top = evt.y;
document.contextMenu.onmouseout =
function (evt) { this.visibility = 'hide'; };
document.contextMenu.visibility = 'show';
return false;
}
}
else if (document.getElementById) {
if (evt.button == 3) {
evt.preventDefault();
var menu = document.getElementById('contextMenu');
menu.style.left = evt.pageX + 'px';
menu.style.top = evt.pageY + 'px';
menu.style.visibility = 'visible';
return false;
}
}
return true;
}
if (navigator.userAgent.toLowerCase().indexOf('msie 5') != -1)
document.oncontextmenu =
showMenu;
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = showMenu;
}
if (!document.all && document.getElementById)
document.onmouseup = showMenu;
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="contextMenu"
ONMOUSEOUT="menu = this; this.tid =
setTimeout('menu.style.visibility = \'hidden\'', 20);"
ONMOUSEOVER="clearTimeout(this.tid);"
>
<A HREF="http://www.kibo.com" CLASS="menu"
ONMOUSEOVER="this.className = 'menuOn'"
ONMOUSEOUT="this.className = 'menu';"
>
Visit GOD
</A>
<BR>
<A HREF="http://javascript.faqts.com" CLASS="menu"
ONMOUSEOVER="this.className = 'menuOn'"
ONMOUSEOUT="this.className = 'menu';"
>
Learn js tricks
</A>
</DIV>
<A HREF="http://www.faqts.com">
collaborative knowledge base
</A>
<IMG SRC=
"http://www.faqts.com/symphony/local/brands/faqts/javascript-faqts.gif">
<P>
Kibology for all
</P>
</BODY>
</HTML>
![http://www.faqts.com/symphony/local/brands/faqts/javascript-faqts.gif">](http://www.faqts.com/symphony/local/brands/faqts/javascript-faqts.gif">){kind=link}