<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>javascript右键菜单</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style>
.DreamMenu
{
position: absolute;
visibility: hidden;
z-index: 100;
overflow: hidden;
width: 150px;
background-color: buttonface;
border: dimgray 1px solid !important;
border: buttonhighlight menu menu buttonhighlight 2px outset;
padding: 1px !important;
padding: 1px 1px 1px 0px;
font-size: 12px;
} .DreamMenu ul
{
margin: 1px;
border-bottom: buttonhighlight 1px solid;
border-top: buttonshadow 1px solid;
} .DreamMenu a
{
display: block;
width: 100%;
padding: 1px 2px 2px 20px;
cursor: default;
text-decoration: none;
color: #000000;
} .DreamMenu a:hover
{
background: highlight;
color: #ffffff;
}
</style>
</head>
<body menu='menu'>
<!---这段js最好写进文件方便用,为了在51能运行就直接写进来了--->
<script>
/***
DreamCore - JsLib/Menu
Date : Dec 03, 2006
Copyright: DreamSoft Co.,Ltd.
Mail : Dream@Dreamsoft.Ca
Author : Egmax
Browser : IE5.0&+,Firefox1.5&+,Netscape7.0&+
Update:
***/
if (!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'A';
var _Menu = "null";
document.onclick = _Hidden;
function _Hidden() {
if (_Tmenu == 0) return;
document.getElementById(_Tmenu).style.visibility = 'hidden';
_Tmenu = 0;
} document.oncontextmenu = function (e) {
_Hidden();
var _Obj = document.all ? event.srcElement : e.target;
if (_Type.indexOf(_Obj.tagName) == -1) return;
_Amenu = _Obj.getAttribute('menu');
if (_Amenu == 'null') return;
if (document.all) e = event;
_ShowMenu(_Amenu, e);
return false;
}
function _ShowMenu(Eid, event) {
_Menu = document.getElementById(Eid); var _Left = event.clientX + document.body.scrollLeft;
var _Top = event.clientY + document.body.scrollTop;
_Menu.style.left = _Left.toString() + 'px';
_Menu.style.top = _Top.toString() + 'px';
_Menu.style.visibility = 'visible';
_Tmenu = Eid;
_Menu.onclick = transfer;
_Menu.oncontextmenu = no_context_menu;
} function transfer(e) {
e = e || window.event; e.cancelBubble = true;
} function no_context_menu(e) {
e = e || window.event;
e = e || window.event; e.cancelBubble = true;
return;
}
/***
可以支持其他标签INPUT,IMG
***/
</script>
<script> _Type = 'INPUT,A,DIV,BODY,IMG';</script>
<!-----设置一个菜单层---->
<div id="menu" class='DreamMenu'>
<a href='javascript:;'>您好</a> <a href='javascript:;'>我是主菜单</a> <a href='javascript:;'>
在页面上单击</a> <a href='javascript:;'>就可以看到我</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu2" class='DreamMenu'>
<a href='javascript:;'>哈哈</a> <a href='javascript:;'>我是个链接</a> <a href='javascript:;'>
好开心啊</a> <a href='javascript:;'>查看</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<!-----设置一个菜单层---->
<div id="menu3" class='DreamMenu'>
<a href='javascript:;'>哈哈</a> <a href='javascript:;'>我是图片</a> <a href='javascript:;'>
虽然打不开</a> <a href='javascript:;'>查看</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<table>
<tr>
<td height="100">
<!-----设置一个菜单menu属性---->
<a href='javascript:;' menu='menu2'>菜单1</a> <a href='javascript:;' menu='menu2'>菜单2</a>
</td>
</tr>
</table>
<div style='height: 300;' menu='menu'>
</div>
<img src='qiougou.gif' menu='menu3' />
</body>
</html>

经过上面的改编:

if (!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'DIV';
document.onclick = _Hidden;
function _Hidden() {
if (_Tmenu || _Tmenu == null || _Tmenu == 0) return;
document.getElementById(_Tmenu).style.visibility = 'hidden';
_Tmenu = 0;
}
document.oncontextmenu = function (e) {
_Hidden();
var _Obj = document.all ? event.srcElement : e.target;
if (_Type.indexOf(_Obj.tagName) == -1) return;
_Amenu = _Obj.getAttribute('menu');
if (_Amenu || _Amenu == null || _Amenu == 'null') return;
if (document.all) e = event;
_ShowMenu(_Amenu, e);
return false;
}
function _ShowMenu(Eid, event, type) {
var _Menu = document.getElementById(Eid);
var _Left = event.clientX + document.body.scrollLeft;
var _Top = event.clientY + document.body.scrollTop;
var _menuOffsetHeight = parseInt(_Menu.offsetHeight);
if (parseInt(document.body.clientHeight) - parseInt(_Top) < _menuOffsetHeight) {//
_Top = _Top - _menuOffsetHeight;
_Menu.style.left = _Left.toString() + 'px';
_Menu.style.top = _Top.toString() + 'px';
_Menu.style.visibility = 'visible';
_Tmenu = Eid; }
else {
_Menu.style.left = _Left.toString() + 'px';
_Menu.style.top = _Top.toString() + 'px';
_Menu.style.visibility = 'visible';
_Tmenu = Eid;
}
}

js实现自定义右键菜单--兼容IE、Firefox、Chrome的更多相关文章

  1. js之自定义右键菜单

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

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

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

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

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

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

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

  5. JS学习笔记 - 自定义右键菜单、文本框只能输入数字

    <script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...

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

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

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

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

  8. jquery 自定义右键菜单

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

  9. js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中(转)

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

随机推荐

  1. 和redis谈一场恋爱(第二天约会了解彼此)

    最近使用了Memcache,带来的便利已经让我欣喜若狂.开启了另一种又快又好的方式存储和读取数据.中间经过了一番折腾,学习了mysql,终于有学到了redis. Redis的全名是Remote Dic ...

  2. easyui datagrid json 格式

    {                                                          "total":239,                    ...

  3. 【原】CSS3 Media在常用设备的设置值

    摘要:今天的一个小小的项目中,在各种手机上样式都显示正常,唯独iphone4s的有些许问题.产品经理又说iphone4s用户还挺多的,无奈,只能查一查iphone4s的media值,顺便做个小小总结; ...

  4. JavaWeb学习笔记——Web开发模式:Mode I和Mode II

  5. iOS直播点赞动画,iOS直播心型点赞动画

    https://github.com/songxing10000/LikeAnimation-PraiseAnimation

  6. html5 摄像头的调用

    <!DOCTYPE html> <html> <head> <title>摄像头调用</title> <meta name=" ...

  7. php字符串常用算法--字符串加密解密

    /** * 加密.解密字符串 * * @global string $db_hash * @global array $pwServer * @param $string 待处理字符串 * @para ...

  8. AspNetUsers

    public class CanDooDbContext : DbContextBase<CanDooDbContext> { protected override void OnMode ...

  9. testNg vs junit 4.X @Test

    http://www.ibm.com/developerworks/cn/java/j-cq08296/ 一个简单的测试用例 初看起来,JUnit 4 和 TestNG 中实现的测试非常相似.为了更好 ...

  10. tomcat的文件路径 servelet的配置 以及maven中的WEB-INF的路径

    Tomcat JavaWeb应用的组成结构 开发JavaWeb应用时,不同类型的文件有严格的存放规则,否则不仅可能会使web应用无法访问,还会导致web服务器启动报错 WebRoot →Web应用所在 ...