<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义右键菜单</title>
<style type="text/css">
body,ul,li{
margin: 0px;
padding: 0px;
}
body{
font: 12px/24px arial;
}
#menu{
position: absolute;
top: -9999px;
left: -9999px;
width: 100px;
border-radius: 3px;
list-style-type: none;
border: 1px solid #8F8F8F;
padding: 2px;
background: #FFFFFF;
}
#menu li{
position: relative;
height: 24px;
padding-left: 24px;
background: #EAEAD7;
vertical-align: top;
}
#menu li a{
display: block;
color: #333333;
background: #FFFFFF;
padding-left: 5px;
text-decoration: none;
}
#menu li.active{
background: #999999;
}
#menu li.active a{
color: #FFFFFF;
background: #8F8F8F;
}
#menu li em{
position: absolute;
top: 0px;
left: 0px;
width: 24px;
height: 24px;
background: url(http://www.codefans.net/jscss/demoimg/201206/ico.png) no-repeat;
}
#menu li em.cur{
background-position: 0px 0px;
}
#menu li em.copy{
background-position: 0px -24px;
}
#menu li em.paste{
background-position: 0px -48px;
}
</style>

<script type="text/javascript">

window.onload = function () {
var oMenu = document.getElementById("menu");
var aLi = oMenu.getElementsByTagName("li");

//加载后隐藏自定义右键菜单
oMenu.style.display = "none";

//菜单鼠标移入/移出样式
for (var i = 0; i < aLi.length; i ++) {
aLi[i].onmouseover = function () {
this.className = "active"
};

aLi[i].onmouseout = function () {
this.className = ""
}
}

//自定义菜单
document.oncontextmenu = function (event) {
var event = event || window.event;
var style = oMenu.style;

style.display = "block";
style.top = event.clientY + "px";
style.left = event.clientX + "px";

return false; // 取消默认行为
};

//页面点击后自定义菜单消失
document.onclick = function (){
oMenu.style.display = "none"
}
};
</script>

</head>
<body>

<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<ul id="menu">
<li><em class="cut"></em><a href="javascript:;">剪切</a></li>
<li><em class="copy"></em><a href="javascript:;">复制</a></li>
<li><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>

</body>
</html>

来源:http://www.bug315.com/article/283.htm

JavaScript自定义右键菜单的更多相关文章

  1. JavaScript实现自定义右键菜单

    JavaScript实现自定义右键菜单,思路如下: 1. 屏蔽默认右键事件: 2. 隐藏自定义的菜单模块(如div.ul等): 3. 右键点击特定或非特定区域,显示菜单模块: 4. 再次点击,隐藏菜单 ...

  2. 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

    连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...

  3. 阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  5. jquery 自定义右键菜单

    如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...

  6. html鼠标自定义右键菜单：css+js实现自定义html右键菜单

    我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...

  7. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  8. 自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]

    许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单 首先来创建JSP页面 <%@ page language=&q ...

  9. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

随机推荐

  1. Eclipse启动tomcat时报错：Multiple Contexts have a path of "/xxx"

    今天使用Eclipse启动tomcat部署项目时,遇到一个奇怪的错误: Could not publish server configuration for Tomcat v6.0 Server at ...

  2. QT对话框模式与非模式

    QT模态对话框及非模态对话框 非模态对话框(Modeless Dialog)的概念不是模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭.对于在模态来显示对 ...

  3. TP学习笔记

    ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://serverNa ...

  4. java程序员应该掌握的技能

    这是看了一篇大神说的java程序员应该会些什么的文章,这里只是把应该掌握的技能部分列了出来. static.final.transient.volatile关键字,内部类,泛型等 static最需要记 ...

  5. JSP lifecycle - with servlet

    编译阶段: servlet容器编译servlet源文件,生成servlet类 初始化阶段: 加载与JSP对应的servlet类,创建其实例,并调用它的初始化方法 执行阶段: 调用与JSP对应的serv ...

  6. Windows7隐藏字体

    今天突然发现字体Times New Roman消失了,如下图所示: 图1.1 不仅仅Times New Roman,还有System.MS Sans Serif--这些熟悉的字体都消失了,不能选用了! ...

  7. Supervisor 守护 dotnetcore 程序

    版权声明:本文由屈政斌原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/240 来源:腾云阁 https://www.qclo ...

  8. linux笔记：网络命令ping,traceroute,ifconfig,netstat；挂载和卸载命令mount,umount

    命令名称:ping功能:测试网络连通性命令所在路径:/bin/ping用法:ping [-c] IP地址参数:-c 指定发送次数 命令名称:ifconfig功能:查看和设置网卡信息(临时设置)命令所在 ...

  9. 带不带protype的区别

    总结写在前面: ①:带有protype:表示类的扩展,必须new后才能使用. ②:不带protype:属于静态方法,直接调用即可. html代码: <!DOCTYPE html> < ...

  10. jq三级全选全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...