<!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. unsigned 整型实现无溢出运算

    普通的 int 整型能表示的范围很有限,所以刷题时很多时候不得不用 long long 来存更大的数据.或者找出数列中某个只出现一次(或奇数次)的数(其余的数均出现两次 / 偶数次),用异或运算的经典 ...

  2. ID和Name的区别

    HTML元素的ID和Name属性的区别一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑.今天BAIDU了一下,才发现里面大有文章.发出来研究研究:最classical的答案:ID就像是一个 ...

  3. MyBatis——Mybatis缓存

    原文:http://www.cnblogs.com/xdp-gacl/p/4270403.html MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架 ...

  4. stdlib标准库的常用API

    iOS 有如下四种随机数方法,下面以产生 [0,100) 的随机数为例: 1. srand((unsigned)time(0));  //不加这句每次产生的随机数不变 int i = rand() % ...

  5. Request 接收参数乱码原理解析

    起因: 今天早上被同事问了一个问题:说接收到的参数是乱码,让我帮着解决一下. 实际情景: 同事负责的平台是Ext.js框架搭建的,web.config配置文件里配置了全局为“GB2312”编码: &l ...

  6. Python类属性详解

    在python开发中,我们常常用到python的类,今天就通过实例和大家扒一扒类的属性,一起来看看吧. 类属性 1.类定义后就存在,而且不需要实例化 2.类属性使得相同类的不同实例共同持有相同变量 类 ...

  7. drupal 2016-11-3

    我随意定义了一个hook menu发现里面的内容很快就加入到了navigation menu里面.

  8. 小例子（二）、winform窗体间的关系

    写一个关于winform窗体间的关系 1.登陆,思路:登陆后隐藏登陆窗体,关闭Form2时结束整个应用程序. //登陆窗体 private void button2_Click(object send ...

  9. POJ--2158--------------Milking Grid(最小覆盖字符矩阵)---（开二维kmp）

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 6169   Accepted: 2573 Desc ...

  10. js 格式验证总结

    1.身份证号验证 var Common = { //身份证号验证 IsIdCardNo: function (IdCard) { var reg = /^\d{15}(\d{2}[0-9X])?$/i ...