JavaScript实现自定义的右键菜单

这里用到了JavaScript的事件对象event 事件捕获与键盘事件的运用。

JavaScript代码部分：

 1 window.onload=function(){
 2             var odiv=document.getElementById('div1');
 3             document.oncontextmenu=function(ev){
 4                 var ev=ev||event;
 5                 odiv.style.display = 'block';
 6                 odiv.style.left =ev.clientX+'px';
 7                 odiv.style.top =ev.clientY+'px';
 8                 return false;
 9             }
10             //点击文档自定义的右键菜单框隐藏起来
11             document.onclick=function(){
12                 odiv.style.display='none';
13             }
14         }

HTML结构：（菜单框里面的内容可以自定义，这里就没有写里面的内容了）

1 <body>
2     <div id="div1"></div>
3 </body>

CSS样式这部分很简单，自己随便写一下样式就可以了。

posted on 2017-12-19 21:00  封寻丸子  阅读(152)  评论(0)  编辑  收藏  举报

导航