右键

2007-09-26 16:18 312人阅读评论(0) 收藏举报

自定义网页右键菜单怎么做？
作者：闪吧   类型:原创   来源:闪吧　　自定义网页右键菜单怎么做？
解决思路：
先插入一个隐藏层作为自定义右键菜单，在单击右键时让它显示，并定位到单击位置偏右偏下。
具体步骤：
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 拥有焦点时获得焦点的对象。

顶: 0

踩: 0

dadou

右键