您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> javascript技巧 >> 文章正文
[图文]javascript中如何实现浏览器上的右键菜单           ★★★
javascript中如何实现浏览器上的右键菜单
作者：中国教程… 　文章来源：中国教程网 　点击数： 　更新时间：2007-8-27 17:44:18　
　页面功能：【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 【字体：小 大】
如何实现浏览器上的右键菜单

　最近在程序员大本营中的讨论中有一位老兄提出如何在浏览器中实现类似于应用程序的鼠标右击后出现右键菜单的效果。唯鱼试了试，发现不是很难解决。现在就将源码和原理说出来和大家共享一下。哈，其实效果不是很完美啦，如果哪位大侠有更好的解决方法。可以给唯鱼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>  
　【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】　文章录入：Rainsion    责任编辑：Rainsion 　【字体：小 大】
　
  • 上一篇文章：

    • 　
  • 下一篇文章：
    • 最新文章
    相关文章
    几种常用禁止修改输入框的方法
    网页脚本语言：深入学习JavaScript中的函数
    JS中将字符串转为XML并读取对象的值
    JavaScript在Avant浏览器中的妙用
    详细讲解JavaScript脚本语言的 document 对
    Javascript获得当前网页页面详细地址的实现
    用JS得到字符串中出现次数最多的字母
    网页制作Javascript经典小技巧总结
    javascript数组
    javascript对象
    网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）
    发表评论：
    　姓　　名： 评 分： 1分 2分 3分 4分 5分
    　评论内容： ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点，与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门