CSS+JavaScript创建右键菜单

最新推荐文章于 2024-03-25 14:12:31 发布

foamflower

最新推荐文章于 2024-03-25 14:12:31 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： javascript css ie function url border

本文链接：https://blog.csdn.net/foamflower/article/details/2871294

版权

本文介绍如何利用CSS和JavaScript实现自定义的网页右键菜单，以替代默认的IE右键选项。通过捕获鼠标右键单击事件（document.oncontextmenu）和左键单击事件（document.body.onclick），创建并控制一个动态显示和隐藏的菜单。菜单内容可自定义，例如添加‘后退’、‘前进’等选项，甚至可以跳转到指定链接。

摘要由CSDN通过智能技术生成

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

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

　　我们首先要考虑的问题是通过鼠标右键单击事件来调用一个函数，这个函数用来显示新的右键菜单的内容。我们知道鼠标的右键单击事件是通过 document.oncontextmenu来调用的，如果我们自行定义document.οncοntextmenu=某个函数，这样就可以实现新右键菜单的调用了，关键问题是如何通过这个函数来控制菜单的显示，同时，还要通过窗体的单击事件document.body.onclick（一般指左键单击）来隐藏菜单，这样一个过程就完成了鼠标右键菜单的弹出和隐藏。

<%@ page language="java" pageEncoding="GBK" %>

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>css和javascript创建页面右键菜单</title>