In HTML, every tag has the "oncontextmenu" event, which accepts the right mouse button action. So we can use the event to fire the javascript function which creates a popup window and gives the menu html to the popup window to implement a right mouse button menu.
The code below is the sample:
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Javascript implement right mouse button menu</title>
<script language="JavaScript">
function popupMenu() {
// create popup window.
var popup = window.createPopup();
// specify the popup window's html.
popup.document.body.innerHTML = itemMenu.innerHTML;
var menuItems = popup.document.body.all[0].rows;
var itemCount = menuItems.length;
var menuWidth = 100;
// set onmouseover and onmouseout action for each item.
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].cells[0].onmouseover = function() {
this.style.background = '#818181';
this.style.color = 'white';
}
// when mouse out the menu item
menuItems[i].cells[0].onmouseout = function() {
this.style.background = '#cccccc';
this.style.color = 'black';
}
}
// mask off the popup's popup.
popup.document.oncontextmenu = function() {
return false;
}
// when menu item is clicked, then hiden the popup.
popup.document.onclick = function() {
popup.hide();
}
// Show the popup on X:event.clientX-1 Y:event.clientY .
popup.show(event.clientX - 1, event.clientY, menuWidth, itemCount * 25, document.body);
// terminate the right mouse button event, to prevent the browser's right mouse button menu.
event.returnValue = false;
// prevent right mouse button click bubble to the parents tags.
event.cancelBubble = true;
return false;
}
function create() {
alert('create menu item is selected');
}
function update() {
alert('update menu item is selected');
}
function deleteMenu() {
alert('delete menu item is selected');
}
</script>
</head>
<body oncontextmenu="popupMenu()" >
<h1>
It's a test for right mouse button menu!
</h1>
<hr>
<!--The right mouse button menu-->
<div id="itemMenu" style="display:none">
<table border="1" width="100%" height="100%" bgcolor="#cccccc" style="border:thin" cellspacing="0">
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.create()">
新增
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.update()">
修改
</td>
</tr>
<tr>
<td style="cursor:default;border:outset 1;" align="center" onclick="parent.deleteMenu()">
删除
</td>
</tr>
</table>
</div>
</body>
</html>