JS 屏蔽右键，创建右键菜单

来源：互联网发布：mac系统如何剪切文件编辑：程序博客网时间：2024/06/06 09:22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
   body{
       font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
       margin-left:0px;
   }
   #contextMenu{   /* The menu container */
       border:1px solid #202867;   /* Border around the entire menu */
       background-color:#FFF;   /* White background color of the menu */
       margin:0px;
       padding:0px;
       width:175px;   /* Width of context menu */
       font-family:arial;
       font-size:12px;
       background-image:url('images/gradient.gif');
       background-repeat:repeat-y;

       /* Never change these two values */
       display:none;
       position:absolute;

   }
   #contextMenu a{   /* Links in the context menu */
       color: #000;
       text-decoration:none;
       line-height:25px;
       vertical-align:middle;
       height:28px;

       /* Don't change these 3 values */
       display:block;
       width:100%;
       clear:both;

   }
   #contextMenu li{   /* Each menu item */
       list-style-type:none;
       padding:1px;
       margin:1px;
       cursor:pointer;
       clear:both;
   }
   #contextMenu li div{   /* Dynamically created divs */
       cursor:pointer;
   }
   #contextMenu .contextMenuHighlighted{   /* Highlighted context menu item */
       border:1px solid #000;
       padding:0px;
       background-color:#E2EBED;

   }
   #contextMenu img{
       border:0px;
   }
   #contextMenu .imageBox{   /* Dynamically created divs for images in the menu */

       float:left;
       padding-left:2px;
       padding-top:3px;
       vertical-align:middle;

       width: 30px;   /* IE 5.x */
       width/* */:/**/28px;   /* Other browsers */
       width: /**/28px;
   }
   #contextMenu .itemTxt{
       float:left;
       width: 120px;   /* IE 5.x */
       width/* */:/**/140px;   /* Other browsers */
       width: /**/140px;
   }
   </style>
   <script type="text/javascript">


   var contextMenuObj;
   var MSIE = navigator.userAgent.indexOf('MSIE')?true:false;
   var navigatorVersion = navigator.appVersion.replace(/.*?MSIE (\d\.\d).*/g,'$1')/1;
   var activeContextMenuItem = false;
   function highlightContextMenuItem()
   {
       this.className='contextMenuHighlighted';
   }

   function deHighlightContextMenuItem()
   {
       this.className='';
   }

   function showContextMenu(e)
   {
      contextMenuSource = this;
      if(activeContextMenuItem)activeContextMenuItem.className='';
      if(document.all)e = event;
      var xPos = e.clientX;
      if(xPos + contextMenuObj.offsetWidth > (document.documentElement.offsetWidth-20)){
       xPos = xPos + (document.documentElement.offsetWidth - (xPos + contextMenuObj.offsetWidth)) - 20;
      }

      var yPos = e.clientY;
      if(window.document.body.scrollTop > 0)
        {
          yPos = (window.screen.Height) ? e.clientY + window.document.body.scrollTop -20 : e.clientY -20;
        }
        else if (window.pageYOffset)
        {
          yPos = (window.pageYOffset > 0) ? e.clientY + window.pageYOffset -20 : e.clientY -20;
        }
        else
        { yPos = e.clientY -20; }
      /* * */
      contextMenuObj.style.left = xPos + 'px';
      contextMenuObj.style.top = yPos + 'px';
      contextMenuObj.style.display='block';
      return false;
   }

   function hideContextMenu(e)
   {
       if(document.all) e = event;
       if(e.button==0 && !MSIE){

       }else{
           contextMenuObj.style.display='none';
       }
   }

   function initContextMenu()
   {
       contextMenuObj = document.getElementById('contextMenu');
       contextMenuObj.style.display = 'block';
       var menuItems = contextMenuObj.getElementsByTagName('LI');
       for(var no=0;no<menuItems.length;no++){
           menuItems[no].onmouseover = highlightContextMenuItem;
           menuItems[no].onmouseout = deHighlightContextMenuItem;

           var aTag = menuItems[no].getElementsByTagName('A')[0];

           var img = menuItems[no].getElementsByTagName('IMG')[0];
           if(img){
               var div = document.createElement('DIV');
               div.className = 'imageBox';
               div.appendChild(img);

               if(MSIE && navigatorVersion<6){
                   aTag.style.paddingLeft = '0px';
               }

               var divTxt = document.createElement('DIV');
               divTxt.className='itemTxt';
               divTxt.innerHTML = aTag.innerHTML;

               aTag.innerHTML = '';
               aTag.appendChild(div);
               aTag.appendChild(divTxt);
               if(MSIE && navigatorVersion<6){
                   div.style.position = 'absolute';
                   div.style.left = '2px';
                   divTxt.style.paddingLeft = '15px';
               }

               if(!document.all){
                   var clearDiv = document.createElement('DIV');
                   clearDiv.style.clear = 'both';
                   aTag.appendChild(clearDiv);
               }
           }else{
               if(MSIE && navigatorVersion<6){
                   aTag.style.paddingLeft = '15px';
                   aTag.style.width = (aTag.offsetWidth - 30) + 'px';
               }else{
                   aTag.style.paddingLeft = '30px';
                   aTag.style.width = (aTag.offsetWidth - 60) + 'px';
               }
           }
       }
       contextMenuObj.style.display = 'none';
       document.documentElement.oncontextmenu = showContextMenu;
       document.documentElement.onclick = hideContextMenu;
   }

   </script>

</head>
<body>
<div align="center">点击鼠标右键看效果</center>
<ul id="contextMenu">
   <li><a href="http://www.sharejs.com">shareJs</a></li>
   <li><a href="http://www.baidu.com">百度一下</a></li>
   <li><a href="http://www.souhu.com">搜狐虎</a></li>
   <li><a href="http://www.alibaba.com">阿里爸爸</a></li>
</ul>
<script type="text/javascript">
initContextMenu();
</script>
</body>

</html>

分两步走：一设置好右键菜单的大小，判断是什么浏览器；二：控制右键时候，将值放入到菜单中去