js自定义右键菜单代码

发表于:2015-07-21 15:40:10 | 阅读数:--次| 作者:js,javascript

摘要：javascript自定义右键菜单代码:右键菜单这个再熟悉不过了，使用电脑的话每天几乎都要操作上千遍右键菜单，下面分享一段自定义右键菜单的代码实例，希望能够给需要相关内容的朋友带来帮助，代码实例如下:蚂蚁部落对我右键出现菜单剪切复制粘贴以上代码基本实现需要的效果，当然还不够完善，可...

右键菜单这个再熟悉不过了，使用电脑的话每天几乎都要操作上千遍右键菜单，下面分享一段自定义右键菜单的代码实例，希望能够给需要相关内容的朋友带来帮助，代码实例如下:

		html5代码
	

运行代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.webkfa.com/" />
<title>web开发</title>
<style type="text/css">
#d1{
  width:100px;
  height:200px;
  background-color:green;
  display:none;
}
#dl a{
  display:block;
}
</style>
<script type="text/javascript">
window.onload=function(){
rightmenu('p1','d1');
}
  
function rightmenu(elementID,menuID){
　var menu=document.getElementById(menuID);      //获取菜单对象
　var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素
　element.onmousedown=function(aevent)
  {         //设置该元素的 按下鼠标右键右键的 处理函数
　　if(window.event)aevent=window.event;      //解决兼容性
　　if(aevent.button==2)
    {                   //当事件属性button的值为2时，表用户按下了右键
　　　 document.oncontextmenu=function(aevent)
      {
   　　　if(window.event)
        {
       　　aevent=window.event;
　　　　　　aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数
　　　　 }
        else
                {
　　　　　  aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数
　　　　 }
　　　　}
　　　　menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
　　　　//将菜单相对 鼠标定位
　　　}
　}
　menu.onmouseout=function()
  {  //设置 鼠标移出菜单时 隐藏菜单
　　 setTimeout(function(){menu.style.display="none";},400);
  }
}
  
</script>
</head>
<body>
<p id="p1">对我右键出现菜单</p>
<div id="d1">
   <a>剪切</a>
   <a>复制</a>
   <a>粘贴</a>
</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.webkfa.com/" />
<title>web开发</title>
<style type="text/css">
#d1{
  width:100px;
  height:200px;
  background-color:green;
  display:none;
}
#dl a{
  display:block;
}
</style>
<script type="text/javascript">
window.onload=function(){
rightmenu('p1','d1');
}
  
function rightmenu(elementID,menuID){
　var menu=document.getElementById(menuID);      //获取菜单对象
　var element=document.getElementById(elementID);//获取点击拥有自定义右键的 元素
　element.onmousedown=function(aevent)
  {         //设置该元素的 按下鼠标右键右键的 处理函数
　　if(window.event)aevent=window.event;      //解决兼容性
　　if(aevent.button==2)
    {                   //当事件属性button的值为2时，表用户按下了右键
　　　 document.oncontextmenu=function(aevent)
      {
   　　　if(window.event)
        {
       　　aevent=window.event;
　　　　　　aevent.returnValue=false;         //对IE 中断 默认点击右键事件处理函数
　　　　 }
        else
                {
　　　　　  aevent.preventDefault();          //对标准DOM 中断 默认点击右键事件处理函数
　　　　 }
　　　　}
　　　　menu.style.cssText='display:block;top:'+aevent.clientY+'px;'+'left:'+aevent.clientX+'px;'
　　　　//将菜单相对 鼠标定位
　　　}
　}
　menu.onmouseout=function()
  {  //设置 鼠标移出菜单时 隐藏菜单
　　 setTimeout(function(){menu.style.display="none";},400);
  }
}
  
</script>
</head>
<body>
<p id="p1">对我右键出现菜单</p>
<div id="d1">
   <a>剪切</a>
   <a>复制</a>
   <a>粘贴</a>
</div>
</body>
</html>

以上代码基本实现需要的效果，当然还不够完善，可以自行完善一下即可，只是提供了一种思路而已。