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


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 相关文章推荐
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
node+multer实现图片上传的示例代码
Feb 18 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
Mar 12 Javascript
js实现点击烟花特效
Oct 14 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.MVC的模板标签系统(五)
2006/09/05 PHP
php实现简单的权限管理的示例代码
2017/08/25 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JS+CSS实现的拖动分页效果实例
2015/05/11 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
Vue关于数据绑定出错解决办法
2017/05/15 Javascript
javascript  数组排序与对象排序的实例
2017/07/17 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python import与from import使用及区别介绍
2018/09/06 Python
Python流程控制 while循环实现解析
2019/09/02 Python
使用Python画出小人发射爱心的代码
2019/11/23 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
药房管理制度范本
2015/08/06 职场文书
春节随笔
2015/08/15 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server