如何实现浏览器上的右键菜单
最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。唯鱼试了试，发现不是很难解决。现在就将源码和原理说出来和大家共享一下。哈，其实效果不是很完美啦，如果哪位大侠有更好的解决方法。可以给唯鱼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>
相关推荐
-
如何实现浏览器上的右键菜单
最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果.唯鱼试了试,发现不是很难解决.现在就将源码和原理说出来和大家共享一下.哈,其实效果不是很完美啦,如果哪位大侠有更好的解决方法.可以给唯鱼yyu@enet.com.cn来信罗. 首先要解决的问题是在怎样的情况鼠标右击不会出现IE的菜单.思路可以有两个,一个是将焦点移开,还有一个就是点在网页的什么地方不会出现右键菜单,而且会响应鼠标点击消息.(哈哈,废话一大堆.思路吗?总要多想想才有的) 想了想
-
原生js自定义右键菜单
本文实例为大家分享了js自定义右键菜单的具体代码,供大家参考,具体内容如下 1.右键菜单触发的基本过程 实现自定义右键菜单我们首先需要了解以下内容: 浏览器默认的右键菜单触发的基本过程 1).单击右键,菜单出现 2).菜单出现,鼠标箭头一直在菜单左上角 3).再换个位置点击右键,原菜单消失,新菜单出现在指定位置 4).点击左键,中键,菜单消失 以上为大致实现过程,不全面,仅供参考 也许文字过于抽象,我们来看看代码吧: 2.HTML结构 <!--start右键菜单的结构--> <div i
-
基于JavaScript实现右键菜单和拖拽功能
下面先给大家介绍下js实现的右键菜单功能,具体详情如下所示: 这一章解决的问题 1.实现右键菜单功能代码. 2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu {
-
js实现右键菜单功能
本文解决的问题:1.实现右键菜单功能代码:2.阻止默认事件的实际应用. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style type="text/css"> #menu { position: fixed; left:0; top:0;
-
百度地图给map添加右键菜单（判断是否为marker）
废话不多说了,直接给大家贴代码了. js: var s;//经度 var w;//纬度 map.addEventListener("rightclick",function(e){ if(e.overlay){//判断右键单击的是否是marker }else{ s = e.point.lng;//经度 w = e.point.lat;//维度 RightClick();//右键单击map出现右键菜单事件 } }); //右键单击map出现右键菜单事件 function RightCli
-
Datagridview使用技巧（9）Datagridview的右键菜单
DataGridView,DataGridViewColumn,DataGridViewRow,DataGridViewCell有ContextMenuStrip属性.可以通过设置ContextMenuStrip对象来控制DataGridView的右键菜单的显示. DataGridViewColumn的ContextMenuStrip属性设定除了列头以外的单元格的右键菜单. DataGridViewRow的ContextMenuStrip属性设定除了行头以外的单元格的右键菜单. DataGrid
-
javascript自定义右键菜单插件
本文实例为大家分享了javascript自定义右键菜单插件的具体代码,供大家参考,具体内容如下 1.使用方式 js文件引入<script src="RightMenu.js"></script> 初始化: let rightMenu = new RightMenu({ targetId:'menu',//需要改变右键菜单的元素id menuItems: items//菜单项数据,json数组 }) 2.menuItems参数 items = [ { id: 'a
-
DataGridView清除显示的数据、设定右键菜单
一.清空数据 1.DataGridView未绑定数据时清空数据 this.dgv_PropDemo.DataSource = null 2.DataGridView绑定数据时清空数据 DataGridView绑定了数据就不能使用this.dgv_PropDemo.DataSource = null清空数据了,使用this.dgv_PropDemo.DataSource = null不仅会清空数据,而且也会把DataGridView的列清空掉,这时就要使用如下的代码清空显示的数据: DataTab
-
IE浏览器增加“复制图像地址”的右键菜单的vbs代码
但IE以及与IE共用右键菜单的MyIE.Sogou等浏览器均没有复制图像链接地址的快捷菜单,通常只有选择图片的属性再在属性对话框中复制图片地址,很麻烦!下面我们给IE添加一个"复制图像地址"的右键菜单,步骤如下: VB新建一个ActiveX Dll工程,工程名:NetCopyURL,将默认生成的类名改为clsCopyURL 在clsCopyURL.cls中添加如下代码: Public Sub CopyImageURL(URL As String) Clipboard.Clear Cli
-
用js实现网页上模仿桌面右键菜单
网页上模仿桌面右键菜单 右击鼠标看看 -_-! \n"; // rbpm = right button pop menu HTMLstr += " \n"; HTMLstr += "\n"; HTMLstr += " \n"; HTMLstr += " \n"; HTMLstr += ""; HTMLstr += "\n"; HTMLstr += "\n";