<!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. C++——将成员函数作为参数

    在C++中,成员函数指针作为参数传递给其他函数和普通函数指针的传递是不同的,首先 我们来回顾一下普通函数指针的传递方法: //------------------------------------- ...

  2. Activity中与ListActivity中使用listview区别

    Activity中与ListActivity中使用listview区别 一.Activity中与ListActivity中使用listview区别(本身没多大区别,只是ListActivity在lis ...

  3. XMPP 常见错误:(<failure xmlns=＂urn:ietf:params:xml:ns:xmpp-sasl＂><not-autho

    1检查jid XMPP认证的问题,一般都是与JID有关的,因此解决这类问题,首选的入口就是分析一下XMPPStream的JID,客户端在与服务器连接后,Socket就绑定了这个端口,用来处理与服务器的 ...

  4. iOS开发 画六边形(多边形)

    - (void)drawRect:(CGRect)rect { UIBezierPath * path = [UIBezierPath bezierPath]; [path moveToPoint:C ...

  5. OpenCV白平衡算法之灰度世界法（消除RGB受光照影响）

    在用OpenCV对图像进行处理时,利用颜色定位是常常会接触到的方法,但RGB受光照影响比较严重,转换到HSV XYZ等空间也解决不了时, 可以用白平衡算法进行修正,使其发黄.发蓝.发红的照片更加趋于自 ...

  6. Java 中String常用方法

    java中String的常用方法 1.length() 字符串的长度 例:char chars[]={'a','b'.'c'}; String s=new String(chars); int len ...

  7. css_兼容IE和FF的写法

    CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和Firefox存在很大的解析差异,这里介绍一下兼容要点. 常见兼容问题: 1.DOCTYPE 影响 CSS 处理2.FF:div 设置 marg ...

  8. IoC 之 2.3 IoC的配置使用（叁）

    2.3.1  XML配置的结构 一般配置文件结构如下: <beans> <import resource="resource1.xml"/> <bea ...

  9. 5.4.1 Selenium2启动空浏览器

    在Web自动化测试中,必须考虑不同浏览器对网站的兼容性测试,所以我们首先介绍如何用webDriver代码打开不同的浏览器. 本节介绍的是在Selenium2启动浏览器时,启动一个干净的没有任务插件及c ...

  10. License Manager 10.3启动失败解决方法

    参考:http://jingyan.baidu.com/article/c275f6bac8763ae33d756788.html 安装ARCGIS10.3过程中无法启动license. 解决办法: ...