js实现自定义右键菜单--兼容IE、Firefox、Chrome

<!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的更多相关文章

js之自定义右键菜单
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS简单实现自定义右键菜单
RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...
js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）
js进阶 12-18 jquery如何实现自定义右键菜单(把问题分细) 一.总结一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...
html鼠标自定义右键菜单：css+js实现自定义html右键菜单
我们在网页中很多都有右键菜单的功能,一般点击右键显示的是浏览器默认的菜单选项,那么我们直接如何通过css+js实现html的右键菜单呢?这篇文章将讲解html鼠标自定义右键菜单的实现原理和实现代码. ...
JS学习笔记 - 自定义右键菜单、文本框只能输入数字
<script> // 事件总共有2个部分, //1.点击鼠标右键的表现 oncontextmenu 2.点击鼠标左键的表现(即普通点击onclick) // 点击右键,div位置定位到鼠 ...
ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单
前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...
自定义右键菜单，禁用浏览器自带的右键菜单[右键菜单实现--Demo]
许多从事Web开发的会发现有些事,我们需要禁用浏览器本事自带的右键菜单,而实现自定义的右键菜单下面我们也来实现一个自定义的右键菜单首先来创建JSP页面 <%@ page language=&q ...
jquery 自定义右键菜单
如果要自定义右键菜单,那么就需要禁止原本的右键菜单,代码如下 document.oncontextmenu = new Function("return false;");//禁止 ...
js屏蔽浏览器右键菜单,粘贴,复制,剪切,选中（转）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

【Beta】第二次任务发布
后端了解社区新建文章.添加评论(回复)的机制.整理成API文档,包括如何请求新建文章.新建评论(回复).如何获取文章内容和评论内容. 验收条件:文档PM要能看懂. 前端微调数据输入部分的布局和操作 ...
web前端环境搭建
第一部分:浏览器浏览器推荐chrome浏览器.FireFox浏览器. 1. chrome浏览器因为集成了Google Developer Tools(谷歌开发者工具),因此大受欢迎. 下载地址:ht ...
angularjs $q、$http 处理多个异步请求
angularjs $q.$http 处理多个异步请求在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: $http.get(' ...
cobbler安装、部署、测试
cobbler功能介绍官网:http://cobbler.github.io 安装 yum install -y httpd tftp dhcp cobbler cobbler-web pykick ...
Android Studio MultiDex 分包碰到的坑
前天准备发包了,测试完毕,打好正式签名包,装到手机上,运行不起来. 网上查了大量资料,都没有解决方案. log显示如下: 04-26 10:07:57.727 1538-1538/? I/MultiD ...
B450黑苹果之路(1)
安装黑苹果,采取的是懒人版写入磁盘分区中,然后再安装1)从硬盘中分两个区,一个是未来使用的目标分区,一个是磁盘镜像区2)由于HFS+支持逻辑分区,所以两个分区都放逻辑分区上,分区不格式化3)使用硬盘助 ...
Eclipse自动补全+常用快捷键
一,Eclipse自动补全增强方法在Eclipse中,从Window -> preferences -> Java -> Editor -> Content assist - ...
python操作数据库
一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安装文件,双击安装文件一步一步进行操作即可. Linux 下的安装可能会更加简单,除了下载安装包进行安装外,一般的l ...
UIView UIwindow
UI:用户界面,用户能看到的各种各样的页面元素 UIview :代表屏幕上的一个矩形区域,管理界面上的内容创建UIview 1.开辟空间并初始化视图(初始化时,给出视图位置和大小 2.对 ...
Runner站立会议01
开会时间:9.10-9.30 地点:二教今天做了什么:学了文本输入,button按钮,界面转换(意图) 遇到什么困难:界面转换时,出现问题,没有正常跳转明天打所作什么:解决今天遇到的问题,学了第二 ...

js实现自定义右键菜单--兼容IE、Firefox、Chrome

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

随机推荐

热门专题