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>

优质内容筛选与推荐>>
1、Linux下Tomcat重新启动
2、[导入]Vista的屏幕截图小工具：Snipping Tool
3、基于Linux命令行终端的ftp客户端程序
4、本地系统密码破解
5、剖析JavaScript传值

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看