1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>自定义右键菜单</title>
  6. <style>
  7. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
  8.     margin: 0;
  9.     padding: 0;
  10. }
  11. body{
  12.     font-family:"Mrcrosoft Yahei",Arial;
  13. }
  14. ul,ol{
  15.     list-style: none;
  16. }
  17. a{
  18.     text-decoration: none;
  19. }
  20. img{
  21.     border:none;
  22. }
  23.     .menu{
  24.         width: 100px;
  25.         background: #9ff;
  26.         position: absolute;
  27.         left: -100%;
  28.     }
  29.     .uls li{
  30.         border-bottom: 1px solid black;
  31.         padding: 5px 0 0 5px;
  32.         border-right: 1px solid black;
  33.         border-left: 1px solid black;
  34.     }
  35.     .uls li:hover{
  36.         background:#f9f ;
  37.     }
  38.     .uls li:hover a{
  39.         color:#ff9 ;
  40.     }
  41.     .uls li:first-child{
  42.         border-top: 1px solid black;
  43.     }
  44.     .uls a{
  45.         display: block;
  46.     }
  47. </style>
  48. </head>
  49. <body>
  50.     <!-- 书写自定义菜单样式 -->
  51.     <div class="menu">
  52.         <ul class="uls">
  53.             <li><a href="数码时钟.html">数码时钟</a></li>
  54.             <li><a href="留言板.html">留言板</a></li>
  55.             <li><a href="进度条.html">进度条</a></li>
  56.             <li><a href="随机生成二维码.html">二维码</a></li>
  57.             <li><a href="吸顶效果.html">吸顶效果</a></li>
  58.             <li><a href="隔行换色.html">隔行换色</a></li>
  59.         </ul>
  60.     </div>
  61.     <script>
  62.          //严格模式
  63.         'use strict';
  64.         //创建一个方法解决获取类名时的兼容性问题
  65.         function byClassName(sClassName){
  66.             if(document.getElementsByClassName){
  67.                 return document.getElementsByClassName(sClassName);
  68.             }else{
  69.                 找到所有的元素
  70.                 var allTagName = document.getElementsByTagName('*');
  71.                 // 然后遍历
  72.                 var result = [];
  73.                 for(var i = 0;i < allTagName.length; i++){
  74.                     // 因为一个页面中可能存在多个相同类名
  75.                     if(allTagName[i].className ==sClassName){
  76.                         result.push(allTagName[i]);
  77.                     }
  78.                 }return result;
  79.  
  80.             }
  81.         }
  82.         var oMenu = byClassName('menu')[0];
  83.         document.oncontextmenu = function(ev){
  84.  
  85.             // 获取事件对象
  86.             var  e = ev || window.event;
  87.             var iL = e.clientX,
  88.                 iT = e.clientY;
  89.                 oMenu.style.left = iL + 'px';
  90.                 oMenu.style.top = iT + 'px';
  91.             // 当点击浏览器任意地方时，让菜单消失
  92.             document.onclick = function(){
  93.                 oMenu.style.left = '-100%';
  94.             }
  95.             //阻止浏览器的默认行为
  96.             return false;
  97.         }
  98.     </script>
  99. </body>
  100. </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. LeetCode——minimum-path-sum

    Question Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...

  2. ACM输入函数测试 - scanf cin 优化的输入

    2017-08-27 10:26:19 writer:pprp 进行测试如下四种输入方式: 1.scanf 2.cin 3.用了ios::sync_with_stdio(false);的cin 4.自 ...

  3. 链表中的倒数第k个结点

    题目描述 输入一个链表,输出该链表中倒数第k个结点.   基本思想:定义两个指针a,b分别指向头节点, a指针先向前走k-1步(注意:因为倒数节点是从倒数第一个结点开始的,而不是零),然后a指针和b指 ...

  4. jQuery获取属性值的方法

    1.利用绑定事件:     $(".callback").on("click","#knbh",function(){      ***** ...

  5. oracle 12c 报错 ora-03137 来自客户机的格式错误的TTC包被拒绝

    昨天下午,实施报了一个oracle的报错ora-03137 说是数据库在11g时没有问题,升级到12c 时,就报错了. 本地调试,看到执行完sql后,报异常,如下: 把SqL在12c的数据库执行一下, ...

  6. MySQL行锁、间隙锁、Next-Key锁

    InnoDB是一个支持行锁的存储引擎,它有三种行锁的算法: Record Lock:行锁,单个行记录上的锁. Gap Lock:间隙锁,锁定一个范围,但不包括记录本身.GAP锁的目的,是为了防止幻读. ...

  7. java, double转String, 去掉0结尾的小数位

    小问题:double值的小数位是0时,转String会有“.0”结尾.比如,double值是“12”,转String得到的字符串是“12.0”.如果需要去掉0结尾的小数位,应当如何解决呢? 解决方案: ...

  8. python 函数、模块、包及import导入方法

    https://www.cnblogs.com/lijunjiang2015/p/7812996.html

  9. CSS布局框架 960GS 表单排版示例

  10. Javascript中的void

    原来void是将其后的字面量当元表达式执行,并永远返回undefined.同时undefined不是关键词.. 由于JS表达式偏啰嗦,于是最近便开始采用Coffeescript来减轻负担.举个栗子,当 ...