javascript+css 实现右键菜单（IE, firefox,chrome）

最新推荐文章于 2019-06-18 16:57:48 发布

转载最新推荐文章于 2019-06-18 16:57:48 发布 · 4.7k 阅读

文章标签：

#firefox #javascript #chrome #ie #css #function

网站搭建专栏收录该内容

62 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现自定义网页右键菜单的方法。利用document.oncontextmenu事件及body.onclick事件，结合CSS样式，可以创建并控制一个美观且实用的右键菜单。文章提供了完整的HTML与JavaScript代码示例。

基本原理：我们知道鼠标的右键单击事件是通过document.oncontextmenu来调用的，如果我们自行定义document.oncontextmenu=某个函数，这样就可以实现新右键菜单的调用了，关键问题是如何通过这个函数来控制菜单的显示，同时，还要通过窗体的单击事件document.body.onclick（一般指左键单击）来隐藏菜单，这样一个过程就完成了鼠标右键菜单的弹出和隐藏。
源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> RightMenu</TITLE> <mce:style></mce:style><style mce_bogus="1">- body { background-color:#3a6ea5; font-size:12px; } /* 右键菜单Start */ #rightmenu { position:absolute; z-index:15; background-color:#cccccc; border:1px solid #eee; width:150px; -moz-border-radius:3; height:160px; display:none; } #rightmenubg { position:absolute; z-index:14; width:150px; height:160px; background-color:#cccccc; -moz-opacity: 0.30; -moz-border-radius:3; filter: progid:dximagetransform.microsoft.blur(pixelradius=2,makeshadow="true",shadowopacity=0.4); display:none; } #rightmenu a { display:block; width:150px; height:20px; line-height:20px; text-decoration: none; color:#000000; } #rightmenu a:hover { color:#000000; background-color:#009; } /* 右键菜单End */ -</style> </HEAD> <BODY onclick="bodyclick(event)" oncontextmenu="return showcontextmenu(event)"> <mce:script type="text/javascript"></mce:script> </BODY> </HTML>