右键

转载 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 拥有焦点时获得焦点的对象。 
 

chrome 解除右键禁用

http://blog.sina.com.cn/s/blog_830edcf30101f3yz.html
  • javakakayi
  • javakakayi
  • 2015年09月23日 10:00
  • 656

mac 系统右键创建打开shell

在开发过程中经常会用到Shell(“命令行”、“终端” or “控制台”?),而我们可以用Mac中一个叫终端的App进入Shell。打开这个App后,默认进入用户的home目录,即“/Users/us...
  • Tony_Wong
  • Tony_Wong
  • 2014年05月10日 07:52
  • 702

安卓开发与分析者的利器--安卓右键工具

安卓右键工具,集成dex转jar,二进制xml查看,apk相关信息查询,apk图标提取,apk优化,手机屏幕截图,安装卸载,签名,反编译和回编译等功能,方便快捷,开发者们的利器。...
  • asmcvc
  • asmcvc
  • 2016年04月07日 11:55
  • 5157

firefox 右键弹出失效的解决方法

用firefox在页面点右键,弹出很长的菜单,貌似包含所有菜单项(不应该,例如,一般只有鼠标在图片上才有“图像另存为.."项),单击菜单项后没反应,查看源码也不弹出源码编辑界面,网上找了有各种解释,有...
  • tusing
  • tusing
  • 2013年06月20日 15:26
  • 1646

Windows10 右键 cmd

Windows10 右键 cmd
  • jacke121
  • jacke121
  • 2017年12月10日 12:39
  • 155

ATOM进行右键添加

Win10系统右键添加绿色版Atom编辑器的打开方式 2015-11-03 18:42 3326人阅读 评论(1) 收藏 举报  分类: Windows(36)  ...
  • OLiver_web
  • OLiver_web
  • 2017年06月13日 17:34
  • 449

Notepad++添加右键打开方式

安装免安装版本的Notepad++,虽然省了安装的事,但是打开文件的时候很麻烦,每次都靠拖动文件到notepad++上,很恶心~ 其实想把notepad++添加到右键打开方式上,需要添加注册表: ...
  • holiday_ob
  • holiday_ob
  • 2017年08月08日 16:24
  • 501

windows解决右键,资源管理器重启问题

一,查看windows日志1,在运行里输入eventvwr命令,打开事件察看器,展开windows日志2,展开应用程序的日志,查看红色叹号的错误信息,点击展开,找到错误模块名称: Sync115Ext...
  • superjunjin
  • superjunjin
  • 2016年11月23日 20:36
  • 2146

chrome插件开发-----右键使用百度搜索

在chrome浏览器中,如果选中关键字,右键搜索,默认的是google搜索,可是google不是很稳定,这个插件就是可以使用百度搜索,直接上源码,很简单,看不懂的地方可以查查文档 manifest.j...
  • iloster
  • iloster
  • 2014年01月08日 15:33
  • 1296

注册表添加右键打开方式

Visual Studio Code 编辑器添加右键打开文件,右键文件时 新建一个文件,把扩展名改为.reg,然后添加如下内容后保存,双击此文件即可。 Windows Registry Edito...
  • Noocl
  • Noocl
  • 2017年11月13日 09:34
  • 152
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:右键
举报原因:
原因补充:

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