右键

本文介绍如何通过插入隐藏层并利用JavaScript实现自定义网页右键菜单的方法,包括菜单显示、定位及隐藏的处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值