右键

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

相关文章推荐

Windows桌面右键新建未出现word/excel/ppt解决办法

系统版本:win10 office版本:office2016 出现原因:安装极速PDF阅读器其他办公套件,后卸载,发现右键不能新建word/excel/ppt 解决方法: 1.win+R快捷键...

Bootstrap table右键功能的实现

最近遇到有一个需求,需要在bootStrapTable上使用右键。网上搜了半天没有找到,最后发现bootStrapTable不支持右键(官方文档给出的答案 https://github.com/wen...

计算机右键-管理打不开解决办法

在桌面的计算机,右键,打开管理,你会发现打不开 不要紧,跟着后面一步步走吧,在键盘输入 win...

html屏蔽右键、禁止复制与禁止查看源代码

如何在网页中屏蔽右键                             众所周知,要保护一个页面,最基础的就是要屏蔽右键。而现在网页上用得最多的是function click(),即下面这...

如何将word等office文件添加到右键的新建菜单

转载自新浪博客:很实用本人亲自实验过写注册表文件的方式,很好用 公司一位同事的电脑右键新建菜单里没有新建word、excel等,要添加右键菜单可以用软件法和修改注册表等,用软件添加右键菜单我不说啦,...

Office2013无法在鼠标右键中新建文件的解决办法

(1)打开注册表按下组合键Win+R调出系统运行对话框,并在对话框中输入:regedit 点击确定出现以下对话框 1.修复Word无法右键新建在注册表HKEY_CLASSES_ROOT 下...

beyond compare 增加右键快捷键

beyond compare 添加到右键菜单

有关win10在文件夹上点击右键的时候 自动关闭

这里有解决方法:http://tieba.baidu.com/p/4124016103我也被這問題困擾好幾個月,剛剛一鼓作氣打算解決它,搜尋時看到你跟我有同樣的問題。很幸運地,後來我找到解決方法了,希...
  • new_abc
  • new_abc
  • 2017年02月07日 16:37
  • 2041

【JAVASCRIPT】使用ztree树,实现右键增加,修改,删除节点。带有复选框。

测试支持火狐,谷歌,IE10等。 主要使用ztree,拥有复选框,增加,修改,删除功能,这些是要连接后台的,自己再修改下就可以用。 效果如下图: 点击增加后会出现 代码如下: ZT...
  • hateson
  • hateson
  • 2013年08月30日 21:53
  • 4133

关于无边框EXE程序窗口嵌入IE浏览器WebBrowser右键属性窗口无法点击响应问题的解决

好久没写博客了,今天有空写点。最近遇到个问题,就是我有一个Delphi写的exe程序,主窗口没有边框(Style=bsNone),标题和边框都是自己画的,然后我嵌了一个TWebBrowser浏览器,一...
  • huzgd
  • huzgd
  • 2015年12月29日 15:32
  • 1804
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:右键
举报原因:
原因补充:

(最多只允许输入30个字)