JavaScript Implements right mouse button menu
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>
