要求：点击页面鼠标右键，阻止默认右键菜单的弹出，并弹出自定义右键菜单。

效果示例：

参考代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>习题</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             list-style: none;
  12.         }
  13.  
  14.         #div1 {
  15.             position: absolute;
  16.             width: 80px;
  17.             background: #ccc;
  18.         }
  19.     </style>
  20.     <script>
  21.  
  22.         window.onload = function () {
  23.             //此处写代码
  24.             var oDiv=document.getElementById('div1');
  25.             oDiv.style.display='none';
  26.             document.oncontextmenu=function(ev){
  27.                 var oEvent=event||ev;
  28.                 oDiv.style.display='block';
  29.                 oDiv.style.left=oEvent.clientX+'px';
  30.                 oDiv.style.top=oEvent.clientY+'px';
  31.                 return false;
  32.             }
  33.             document.onclick=function(){
  34.                 oDiv.style.display='none';
  35.             }
  36.         }
  37.     </script>
  38. </head>
  39.  
  40. <body>
  41.     <div id='div1'>
  42.         <ul>
  43.             <li>aaa</li>
  44.             <li>bbb</li>
  45.             <li>ccc</li>
  46.         </ul>
  47.     </div>
  48. </body>
  49. </html>

JS自定义右键菜单案例的更多相关文章

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

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

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

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

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

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

  4. js之自定义右键菜单

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

  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. JavaScript自定义右键菜单

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

随机推荐

  1. 前端开发：JavaScript---ECMAScript

    JavaScript:JavaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的脚本语言.它运行在客户端从而减轻服务器的负担. js是一种 ...

  2. Linux下汇编语言学习笔记2 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. Thinkphp5.0 的视图view的比较标签

    Thinkphp5.0 的视图view的比较标签 {eq name="a" value="10"} <p>相等</p> {else/} ...

  4. Hive之执行计划分析(explain)

    Hive是通过把sql转换成对应mapreduce程序,然后提交到Hadoop上执行,查看具体的执行计划可以通过执行explain sql知晓 一条sql会被转化成由多个阶段组成的步骤,每个步骤有执行 ...

  5. 【SQL Server 学习系列】-- 清除SQL Server 2012连接过的服务器名称

    需要删除两个地方,删除前请注意备份! 1.  %AppData%\Microsoft\Microsoft SQL Server\100\Tools\Shell\SqlStudio.bin 2.  %A ...

  6. SqlServer2008发布订阅（数据同步）

    目录 1. 发布必备条件 1.1. 数据库故障还原模型必需为完全还原模型 1.2. 数据库被同步的数据表必须有主键 1.3. 计算机名称来进行SQLServer服务器的注册 1.4. SQLServe ...

  7. mybatis collection标签和association标签（一对多，一对一）转载

    mybatis 一对一与一对多collection和association的使用   在mybatis如何进行一对一.一对多的多表查询呢?这里用一个简单的例子说明. 一.一对一 1.associati ...

  8. 大话设计模式C++实现-第8章-工厂方法模式

    一.UML图 二.概念 工厂方法模式(Factory Method):定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法是一个类的实例化延迟到其子类. 三.包括的角色 (1)抽象工厂 (2 ...

  9. 如何以正确的顺序重新安装驱动程序 | Dell 中国

      购买 支持 社区 我的帐户     购买 支持 社区   如何以正确的顺序重新安装驱动程序 在戴尔笔记本电脑或台式机上手动重新安装Microsoft Windows操作系统后,您还必须以正确的顺序 ...

  10. 【C++/数据结构】单链表的基本操作

    #pragma once #ifndef _CLIST_H_ #define _CLIST_H_ #include <iostream> #include <assert.h> ...