<!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. c# 调用webapi 传参 特殊字符的问题

    最近在做对接数据接口,遇到一些问题,在C#后台写请求webapi的接口,但是传递过程中参数如果有特殊字符,传入过去之后又问题. 需要转换一下,通过System.Web.HttpUtility.UrlE ...

  2. 比较好的Json 格式数据

    { "81040753986": [{ "order_info": { "unique_package_reference": " ...

  3. IIS服务器管理学习

    工欲善其事必先利其器 首先给服务器配上强力的软件,用于安全防护和监控. 公司服务器用的阿里云的ECS,已经有防护和监控了,之后又选择额外加了一个安全狗 为了监控服务器上系统的各项运行指标,又买了听云平 ...

  4. python之Memcached 安装及操作

    一.Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的 ...

  5. Linux权限控制

    文件属性 权限说明 文件用户组调 权限设置建议 文件属性 在shell环境里输入:ls -l 可以查看当前目录文件.如: drwxr-xr-x. 14 root root 4096 Apr 5 18: ...

  6. url传递数据类型

    php中传递数据,get或post方式为啥用字符串传递,为什么不能直接用数组形式,用的话可以吗

  7. 探索C++虚函数

    探索C++虚函数 1 测试环境 各个编译器对虚函数的实现有各自区别,但原理大致相同.本文基于VS2008探索虚函数 2 测试代码 #pragma once #include <iostream& ...

  8. MySQL索引最左原则

    通过实例理解单列索引.多列索引以及最左前缀原则 实例:现在我们想查出满足以下条件的用户id: 因为我们不想扫描整表,故考虑用索引. 单列索引: ALTER TABLE people ADD INDEX ...

  9. 微信小程序：scroll-view的bug

    flex:1并不能使scroll-view的高度固定,需要添加高度height:1rpx(数值大于0)就行

  10. SQL使用CASE 语句

    CASE 语句可以在SELECT 子句和ORDER BY 子句中使用 CASE语句分为两种Case Simple Expression and Case Search Expression Case ...