文章分类 Classification
js实现右键菜单效果
稿件来源: 阳光企业网站管理系统 撰稿作者: 太阳光 发表日期: 2013-11-21 阅读次数: 193 查看权限: 游客查看
js实现右键菜单效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jS实现自定义右键菜单</title> <style type="text/css"> #menu { width : 130px; border : 1px solid gray; margin:0; padding : 2px 2px 2px 20px; list-style-type: none; visibility : hidden; position : absolute; background-color: #efefef; box-shadow: 3px 3px rgba(0,0,0,.2); } #menu li {text-decoration : none;font-size: 14px;color: #333;} #menu li:hover {background-color : #d8d8d8;cursor: pointer} </style> <script> window.onload = function(){ var doc = document.documentElement; var menu = document.getElementById("menu"); document.oncontextmenu = function (){return false}; function dealEvent(obj,evt,callback){ window.addEventListener ? obj.addEventListener(evt,callback,false) : obj.attachEvent("on"+evt,callback); } dealEvent(document,"contextmenu",show_menu); dealEvent(document,"click",click_event); function show_menu(e){ e = e||window.event; menu.style.left = (doc.clientWidth + doc.scrollLeft - e.clientX > menu.offsetWidth ? e.clientX : e.clientX - menu.offsetWidth) +"px"; menu.style.top = (doc.clientHeight + doc.scrollTop - e.clientY > menu.offsetHeight ? e.clientY : e.clientY - menu.offsetHeight) +"px"; menu.style.visibility = "visible"; } function click_event(e){ e = e || window.event; if(e.which !=3){ //ff右键也会触发click事件 var p = e.target ? e.target : e.srcElement; if(p.parentNode.id != "menu"){ menu.style.visibility = "hidden"; }else{ document.all ? window.event.cancelBubble = true : e.stopPropagation(); } } } }; </script> </head> <body> <ul id="menu"> <li>后退</li> <li>前进</li> <li>地图api</li> <li>实时交通<hr/></li> <li>地图搜索</li> <li>驾驶导航</li> <li>灵图UU<hr/></li> <li>路书下载</li> <li>关于本站</li> <li>友情链接</li> </ul> </body> </html>
关键词: js,右键菜单 编辑时间: 2013-11-21 14:19:08
0
高兴0
支持0
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈0
无聊0
反对0
愤怒
0%(0)
0%(0)
- 中搜索:js实现右键菜单效果
- 中搜索:js实现右键菜单效果
- 暂无评论
文章图片 article Pictrue
网友评论