CSS+JavaScript打造超酷右键菜单

2024-01-01 分类：网站建设

其实在网页上实现右键菜单的风格化已经是一个老话题了，正常情况下，网页上的右键菜单是默认IE右键选项，包括了一些常用的功能。

但有时候我们会遇到这样的问题，我们希望禁止访问者使用右键菜单或者希望屏蔽右键菜单的某些功能，比如，为了保护网页内容我们不希望访问者通过右键菜单来查看网页源代码，也不希望其通过右键来对网页内容进行选取、复制等，很多网页设计者在考虑这个问题的时候都是简单地对右键进行屏蔽，与其这样我们还不如用脚本来实现一个风格右键菜单，并在这个右键菜单中装上我们自己的内容。下面我们来尝试一下这个设想。

我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数，这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过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>

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

分享文章：CSS+JavaScript打造超酷右键菜单
当前URL：https://www.cdcxhl.com/news36/311436.html

成都网站建设公司_创新互联，为您提供微信公众号、网站维护、网站收录、微信小程序、标签优化、虚拟主机

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容