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


今天和大家一起学习一下如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。

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


  想了想, 总结出的下面几种方法


  1、响应右键消息出一个ALERT框(还有点新鲜的东东没有)。


  2、响应右键消息后弹出一个新的窗口。将初始页的的焦点移开。


  可是经过试验后发现只有窗口出现在鼠标右击的位置时,才会没有浏览器的右键菜单出现。


  3、响应右键消息后弹出一个HTML的对话框。即使用showModalDialog来开启一个HTML对话框。使用这种方式可以让右键菜单不会出现。但是有一个问题是使用使用showModalDialog开启的对话框不会向使用Window.Open开启的对话框一样可以移出屏幕所在的范围。就是说始终可以看见有一个对话框出现在屏幕上。这条路也不能走了。


  4、最后一招了,在Select上进行鼠标右击或左击都不会有反应。那么如果每次鼠标都点在Select上,不就不会出现浏览器的右键菜单了。

 

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


< HTML>

< title>webjx 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>

本文作者:



相关阅读:
在MySQL中用正则表达式替换数据库中的内容的方法
Linux内核配置选项
Windows Vista系统下如何输入特殊字符
js实现的类似QQ的等级的代码
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
利用内置管理工具揪出拖慢IE 8速度的罪魁祸首
批处理之家发现的用批处理实现的系统类应用代码
限制访问Oracle客户端IP方法总结
firefox 滚动条消失引起页面抖动的问题
Oracle一则诡异的程序
帮助你好好学习CSS的“边”和“内容”
基于jquery的高性能td和input切换并可修改内容实现代码
用UNetbootin轻松把Linux操作系统装进U盘
用ASP实现IE地址栏参数的判断
快速导航

Copyright © 2016 phpStudy |