代码描述:js自定义 右键菜单详解。js自定义右键菜单详解简单介绍
关于右键菜单大家一定不会陌生,比如我们可以再桌面或者网页点击右键,会弹出响应的右键菜单,选择不同的菜单项可以执行不同的操作,但是有时候这样的菜单并不能够满足需要,可能需要根据不同的操作场景来弹出不同的菜单,下面就介绍一下如何利用js实现自定义右键菜单的功能,代码实例如下:
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> body{ font-size:12px; line-height:24px; font-family:Arial, Helvetica, sans-serif; } #activeArea{ width:300px; height:200px; background:#06C; color:#fff; } #cstCM{ width:120px; background:#eee; border:1px solid #ccc; position:absolute; } #cstCM ul{ margin:0; padding:0; } #cstCM ul li{ list-style:none; padding:0 10px; cursor:default; } #cstCM ul li:hover{ background:#009; color:#fff; } .splitTop{border-bottom:1px solid #ccc;} .splitBottom{border-top:1px solid #fff;} </style> <script type="text/javascript"> function customContextMenu(ev){ var cstCM=document.getElementById('cstCM'); cstCM.style.left=ev.clientX + 'px'; cstCM.style.top=ev.clientY + 'px'; cstCM.style.display='block'; document.onmousedown=clearCustomCM; return false; } function clearCustomCM(){ document.getElementById('cstCM').style.display = 'none'; document.onmousedown=null; } window.onload=function(){ var activeArea=document.getElementById("activeArea"); activeArea.oncontextmenu=function(ev){ var ev=window.event||ev; customContextMenu(ev); return false; } } </script> </head> <body> <div id="cstCM" style="display:none;"> <ul> <li>div css教程</li> <li>jquery教程</li> <li>javascript教程</li> <li>正则表达式</li> <li>特效代码</li> <li>51前端</li> </ul> </div> <div id="activeArea">51前端</div> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能