我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数,这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过document.oncontextmenu来调用的,如果我们自行定义document.oncontextmenu=某个函数,这样就可以实现新右键菜单的调用了,关键问题是如何通过这个函数来控制菜单的显示,同时,还要通过窗体的单击事件document.body.onclick(一般指左键单击)来隐藏菜单,这样一个过程就完成了鼠标右键菜单的弹出和隐藏。
首先来看看这段脚本代码:
/*初始化*/
<script language="JavaScript1.2">
/*如果当前浏览器是Internet Explorer,document.all就返回真*/
if (document.all && window.print) {
/*选择菜单方块的显示样式*/
ie5menu.className = menuskin;
/*重定向鼠标右键事件的处理过程为自定义程序showmenuie5*/
document.oncontextmenu = showmenuie5;
/*重定向鼠标左键事件的处理过程为自定义程序hidemenuie5*/
document.body.onclick = hidemenuie5;
}
</script>
一般情况下页面装载完毕后才发生鼠标右键事件,所以为了不影响页面的装载速度我们可以把这段代码放在页面的最后面。这段代码很简单,首先检验是不是IE浏览器,如果是那么下面的定义就应该有效。也就是说当检查到客户端使用的浏览器是IE的时候那么当用户产生右键事件时就调用函数showmenuie5,当用户产生左键事件时就调用函数hidemenuie5。
解决了上面这个问题,现在我们要考虑如何通过函数showmenuie5和函数hidemenuie5来实现菜单的显示和隐藏。当然,这里的菜单并不是真正意义的右键菜单,而是我们自己做的一个div,在这个div中装上我们想要装的东西。通过鼠标事件调用函数来控制它的显隐,这就达到了使用鼠标右键一样的效果了。
分享到:
相关推荐
Html+Css+Javascript从入门到精通.pdfHtml+Css+Javascript从入门到精通.pdf
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 HTML+CSS+JavaScript等 学习 HTML+CSS+JavaScript等学习 ...
Html+Css +JavaScript 表白网站~ Html+Css +JavaScript 表白网站~ Html+Css +JavaScript 表白网站~ Html+Css +JavaScript 表白网站~ Html+Css +JavaScript 表白网站~ Html+Css +JavaScript 表白网站~ Html+Css +...
HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手...
html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的学习代码html+css+JavaScript的学习代码 html+css+JavaScript的...
HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 HTML+CSS+JavaScript教程学习笔记HTML+CSS+JavaScript教程学习笔记 ...
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
HTML+CSS+JavaScript网页制作案例教程(第2版)-教学大纲.zip
web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的电子商城购物网站首页...
个人博客,基于html+css+JavaScript的完整代码,内容全面可以直接使用。
HTML+CSS+JavaScript+php+mysql帮助手册(内含html5+css3+javascript5帮助手册)。
基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页俄罗斯方块小游戏.zip 基于HTML+CSS+JavaScript 制作的网页...
HTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+javascript实现的手机商城静态页面.zipHTML5+CSS+...
html+css+javascript网页设计教程,详细案例配套源码,案例都是单独的方便查看理解,html+css+javascript网页设计教程,详细案例配套源码,案例都是单独的方便查看理解。
web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的精美电商购物网站首页...
学习21天学通HTML+CSS+JavaScript Web开发笔记和源代码 学习21天学通HTML+CSS+JavaScript Web开发笔记和源代码 学习21天学通HTML+CSS+JavaScript Web开发笔记和源代码 学习21天学通HTML+CSS+JavaScript Web开发笔记...
web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于HTML+CSS+JavaScript实现的商城首页源码 web期末大作业 基于...
JS+CSS网页右键菜单
HTML+CSS+JavaScript网页设计与布局实用教程 (第2版) 实例素材.rar