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


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 相关文章推荐
新浪刚打开页面出来的全屏广告代码
Apr 02 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
什么是JavaScript
Aug 13 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
javascript简易画板开发
Apr 12 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
angularjs+bootstrap菜单的使用示例代码
Mar 07 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
载入进度条 效果
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
PHP 5.0对象模型深度探索之对象复制
2008/03/27 PHP
改写ThinkPHP的U方法使其路由下分页正常
2014/07/02 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
jQuery查找节点并获取节点属性的方法
2016/09/09 Javascript
JS重载实现方法分析
2016/12/16 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
Python命名空间详解
2014/08/18 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python如何设置静态变量
2020/09/07 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
史蒂夫·马登加拿大官网:Steve Madden加拿大
2017/11/18 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
班组长安全工作职责
2014/07/15 职场文书
关于学习的决心书
2015/02/05 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js