<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>自定义右键菜单</title>

<style>

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{

    margin: 0;

    padding: 0;

}

body{

    font-family:"Mrcrosoft Yahei",Arial;

}

ul,ol{

    list-style: none;

}

a{

    text-decoration: none;

}

img{

    border:none;

}

    .menu{

        width: 100px;

        background: #9ff;

        position: absolute;

        left: -100%;

    }

    .uls li{

        border-bottom: 1px solid black;

        padding: 5px 0 0 5px;

        border-right: 1px solid black;

        border-left: 1px solid black;

    }

    .uls li:hover{

        background:#f9f ;

    }

    .uls li:hover a{

        color:#ff9 ;

    }

    .uls li:first-child{

        border-top: 1px solid black;

    }

    .uls a{

        display: block;

    }

</style>

</head>

<body>

    <!-- 书写自定义菜单样式 -->

    <div class="menu">

        <ul class="uls">

            <li><a href="数码时钟.html">数码时钟</a></li>

            <li><a href="留言板.html">留言板</a></li>

            <li><a href="进度条.html">进度条</a></li>

            <li><a href="随机生成二维码.html">二维码</a></li>

            <li><a href="吸顶效果.html">吸顶效果</a></li>

            <li><a href="隔行换色.html">隔行换色</a></li>

        </ul>

    </div>

    <script>

         //严格模式

        'use strict';

        //创建一个方法解决获取类名时的兼容性问题

        function byClassName(sClassName){

            if(document.getElementsByClassName){

                return document.getElementsByClassName(sClassName);

            }else{

                找到所有的元素

                var allTagName = document.getElementsByTagName('*');

                // 然后遍历

                var result = [];

                for(var i = 0;i < allTagName.length; i++){

                    // 因为一个页面中可能存在多个相同类名

                    if(allTagName[i].className ==sClassName){

                        result.push(allTagName[i]);

                    }

                }return result;

            }

        }

        var oMenu = byClassName('menu')[0];

        document.oncontextmenu = function(ev){

            // 获取事件对象

            var  e = ev || window.event;

            var iL = e.clientX,

                iT = e.clientY;

                oMenu.style.left = iL + 'px';

                oMenu.style.top = iT + 'px';

            // 当点击浏览器任意地方时，让菜单消失

            document.onclick = function(){

                oMenu.style.left = '-100%';

            }

            //阻止浏览器的默认行为

            return false;

        }

    </script>

</body>

</html>

　　

 

js之自定义右键菜单的更多相关文章

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

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

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

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

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

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

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

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

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

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

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

  7. jquery 自定义右键菜单

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

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

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

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

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

随机推荐

  1. ETL增量处理总结

    1 LOG表 1.1 思路 用log表记录业务库某表yw_tableA发生变化数据的主键.数据进入BI库目标表bi_tableA前,先根据log表记录的主键进行delete. 1.2 设计 1.2.1 ...

  2. ng2 quickstart

    1.下载 git clone https://github.com/angular/quickstart.git quickstart-angular 2.安装模块 npm install 3.启动 ...

  3. IE8下打印内容缩小问题

    去掉启动缩小字体填充的设置项勾选 来自为知笔记(Wiz)

  4. 解题报告：hdu2602 Bone collector 01背包模板

    2017-09-03 15:42:20 writer:pprp 01背包裸题,直接用一维阵列的做法就可以了 /* @theme: 01 背包问题 - 一维阵列 hdu 2602 @writer:ppr ...

  5. Python学习札记(二) python3.5安装 + (假装是)第一个Python程序

    参考: Mac OS 安装 Python3.5 廖雪峰Python教程:安装Python 笔记: 安装: 1.官方网站下载安装包:安装程序 2.执行安装程序完成Python3.5包的安装. 3.安装P ...

  6. ADO.NET 使用DELETE语句批量删除操作,提示超时,删除失败,几种优化解决思路

    起因是如此简单的一句sql 提示:Timeout 时间已到.在操作完成之前超时时间已过或服务器未响应. 提供几种解决思路: 1.检查WHERE条件中字段是否已建索引 2.检查是否被其他表引用,引用表外 ...

  7. oracle快速创建主键

    oracle中,有时我们会发现有一些表中,一些记录它们每个字段的数据 都是一样一样的,即重复数据,这种数据的不存在肯定是不对了. 究其原因,就是该表没有主键,给一个表创建主键,非常容易: alter ...

  8. input输入框延时发送请求问题

    同样是面试遇到的问题,input输入框,怎么减少发送请求次数. 键盘抬起触发事件,首先清除定时器,再开启定时器.只要小于1s的连续输入,都会先把上一次定时器清除.停顿一秒后,开始执行请求事件(此处为c ...

  9. docker教程目录

    为什么要用 Docker 什么是 Docker Docker 镜像 Docker容器的运用 Docker仓库 Docker如何获取镜像 CentOS 安装Docker Docker 列出镜像 Dock ...

  10. 超详细！mac flutter 创建过程及遇到的问题

    虽然网上有教程,但是过程中遇到些问题,这些问题教程里并没有,所以写这个文章记录一下. 1.打开终端 2.clone flutter 命令: git clone -b beta https://gith ...