自定义网页右键菜单
2008-06-26 13:20
232 查看
自定义网页右键菜单怎么做?
解决思路:
先插入一个隐藏层作为自定义右键菜单,在单击右键时让它显示,并定位到单击位置偏右偏下。
具体步骤:
1.先插入一个作为自定义右键菜单的隐藏层。
<span id="contextmenu" style="border:1px solid #666666;background:#eeeeee;width:55px;padding:5px;display:none;position:absolute">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
</span>
2.在单击右键时让隐藏层显示,并定位到跟鼠标当前位置的右下方。
document.oncontextmenu=function (){
contextmenu.style.posLeft= document.body.scrollLeft+event.x+10
contextmenu.style.posTop= document.body.scrollTop+event.y+10
contextmenu.style.display="inline"
return false
}
3.在自定义右键菜单外单击时隐藏该菜单。
document.onclick=function(){
if(document.activeElement!=contextmenu)
contextmenu.style.display="none"
}
4.完整代码。
<span id="contextmenu" style="border:1px solid #666666;background:#eeeeee;width:55px;padding:5px;display:none;position:absolute">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
<div>item6</div>
</span>
<script>
//当用户使用鼠标右键单击客户区打开上下文菜单时触发函数
document.oncontextmenu=function (){
//定位 id 为 contextmenu 的层的 X 坐标到鼠标单击时的 X 坐标偏右10象素
contextmenu.style.posLeft= document.body.scrollLeft+event.x+10
//定位 id 为 contextmenu 的层的 Y 坐标到鼠标单击时的 Y 坐标偏下10象素
contextmenu.style.posTop= document.body.scrollTop+event.y+10
//以行内元素方式显示 contextmenu 层
contextmenu.style.display="inline"
return false //返回 false,以屏蔽真正的右键菜单的显示
}
document.onclick=function(){//当用户用鼠标左键单击客户区时触发函数
//如果 contextmenu 层非当前焦点对象
if(document.activeElement!=contextmenu)
contextmenu.style.display="none" //隐藏 contextmenu 层
}
</script>
注意:定位鼠标位置时不要忽略页面滚动条已滚动距离。
提示:你可以给 contextmenu 层内的文字加上链接或动作,以实现相应功能。
试一试:读者可以试试当自定义右键菜单显示超出右下滚动边界时的判断和处理。
特别提示
代码运行后,在文档区右击一下,出现如图 3.25 所示效果。
图 3.25 自定义网页中的右键菜单
特别说明
本例先通过插入一个隐藏的自定义右键菜单层,然后在鼠标右击时显示,在单击时用document.activeElement判断该层是否为文档当前的焦点对象,如果不是,则隐藏该层,否则不作任何处理。activeElement 获取当父 document 拥有焦点时获得焦点的对
相关文章推荐
- 网页自定义右键菜单
- 用Popup对象构建自定义的网页右键菜单
- [整理]网页自定义鼠标右键菜单特效
- jquery实现在网页指定区域显示自定义右键菜单效果
- 如何实现网页自定义右键菜单?
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- 在网页指定区域显示自定义的右键菜单
- 自定义网页右键弹出菜单
- 自定义网页右键菜单
- javascript+css实现自定义网页右键菜单
- 自定义网页右键弹出菜单
- jquery实现在网页指定区域显示自定义右键菜单效果
- Qml实现自定义右键菜单
- IE浏览器右键菜单插件开发(上篇)——自定义一个IE右键菜单项
- Win7如何自定义鼠标右键菜单 添加在此处打开CMD窗口
- 微信自定义菜单view类型获取openid访问网页
- [JavaScript] Ie 右键菜单取网页信息
- javascript鼠标右键菜单自定义效果
- js自定义右键菜单