如何实现浏览器上的右键菜单


Posted in Javascript onJuly 10, 2006

 

 最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。唯鱼试了试,发现不是很难解决。现在就将源码和原理说出来和大家共享一下。哈,其实效果不是很完美啦,如果哪位大侠有更好的解决方法。可以给唯鱼yyu@enet.com.cn来信罗。 

首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单。思路可以有两个,一个是将焦点移开,还有一个就是点在网页的什么地方不会出现右键菜单,而且会响应鼠标点击消息。(哈哈,废话一大堆。思路吗?总要多想想才有的) 

想了想, 总结出的下面几种方法
1、响应右键消息出一个ALERT框(还有点新鲜的东东没有)。 
2、响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。 
可是经过试验后发现只有窗口出现在鼠标右击的位置时,才会没有浏览器的右键菜单出现。 
3、响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用showModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。 
4、呵呵,最后一招了,唯鱼偶尔发现在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上,不就不会出现浏览器的右键菜单了。 

下面就是一个例子,感兴趣的可以把下面的拷贝成Test.html,就可以看看效果了。

< HTML> 

< title>VFish Test< /title> 

< script> 

var x, y; 

document.onmousemove=moveMouse 

document.onmousedown=click 

function moveMouse() 

Layer1.style.left = event.clientX - 2; 

Layer1.style.top = event.clientY - 2; 

function click() 

if (event.button==2) 

x = event.clientX; 

y = event.clientY; 

Layer1.style.visibility=""; 

window.setTimeout("showMenu();", 500); 

else 

HiddenPop(); 

PopMenu.style.visibility='hidden'; 

function showMenu() 

PopMenu.style.left = x- 2; 

PopMenu.style.top = y- 2; 

PopMenu.style.visibility=""; 

HiddenPop(); 

function HiddenPop() 

Layer1.style.visibility='hidden'; 

< /script> 

< BODY> 

在窗口中右击一下看看出什么:) 

< div id=Layer1 style="position:absolute; width:4px; height:4px; z-index:3; visibility: hidden"> 

< select style="width:4">< /select> 

< /div> 

< div id=PopMenu style="position:absolute; width:100px; height:100px; z-index:1; visibility: hidden"> 

< table border=2 width=100 > 

< TH align="center" color="sliver" onclick=""> 

唯鱼的菜单 

< /tH> 

< tr> 

< td> 

click it!:) 

< /td> 

< /tr> 

< /table> 

< /div> 

< /BODY> 

< /HTML>

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
jQuery 遍历json数组的实现代码
Sep 22 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 Javascript
Vue引入Stylus知识点总结
Jan 16 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
载入进度条 效果
Jul 08 #Javascript
让广告代码不再影响你的网页加载速度
Jul 07 #Javascript
一段实时更新的时间代码
Jul 07 #Javascript
根据分辨率不同,调用不同的css文件
Jul 07 #Javascript
鼠标图片振动代码
Jul 06 #Javascript
显示、隐藏密码
Jul 01 #Javascript
让焦点自动跳转
Jul 01 #Javascript
You might like
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
一个改进的UBB类
2006/10/09 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
JQuery 操作/获取table具体代码
2013/06/13 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python生成九宫格图片
2018/11/19 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
毕业生就业自荐书
2013/12/15 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
伏羲庙导游词
2015/02/09 职场文书
幼儿园教师求职信
2015/03/20 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技