<!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. python中的最最最基本语法（1）

    注意:对于我这个以前用c/c++的同学来说,可能一开始学习pyhon时有点不适应的,为什么呢?因为吧,python中,没有这玩意:{},也不用每句话才用分号分开的.python中通过缩进来分块的,一行 ...

  2. 2年后的Delphi XE6

    1.有幸下载到Delphi XE6,下载地址如下: http://altd.embarcadero.com/download/radstudio/xe6/delphicbuilder_xe6_win. ...

  3. Java Ant build.xml详解

    1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台   --因为 ...

  4. [js] 有趣的js面试题，你答对了吗？

    题目1: 回答以下代码,alert的值分别是多少?

  5. Spring 定时任务的配置

    1.applicationContext.xml 中 加入task 的声明与xsd ? 1 xmlns:task="http://www.springframework.org/schema ...

  6. Java多线程同步的方法

    一 synchronized关键字 1.synchronized实现原理: ---基于对象监视器(锁) java中所有对象都自动含有单一的锁,JVM负责跟踪对象被加锁的次数.如果一个对象被解锁,其计数 ...

  7. ctrl + d 在phpstorm 和 eclipse 中的不同含义

    Ctrl + d 在phpstrom是复制一行,非常的方便,但是eclipse中却是删除一行,非常的特别.感觉上,phpstorm更注重鼠标,但eclipse貌似更多鼠标和键盘的操作, 默认情况下[p ...

  8. mismatch位置（MD tag）- sam/bam格式解读进阶

    这算是第二讲了,前面一讲是:Edit Distance编辑距离(NM tag)- sam/bam格式解读进阶 MD是mismatch位置的字符串的表示形式,貌似在call SNP和indel的时候会用 ...

  9. Falcon：三代reads比对组装工具箱

    主页:github: PacificBiosciences/FALCON 简介 Falcon是一组通过快速比对长reads,从而来consensus和组装的工具. Falcon工具包是一组简单的代码集 ...

  10. robotframework笔记13

    变量 介绍 变量是不可或缺的功能机器人框架,他们可以 在大多数地方用于测试数据. 通常,他们使用 参数测试用例表中的关键字和关键字表,但是 也都设置允许变量的值. 一个正常的字 的名字 不能 指定一个 ...