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

效果示例：

参考代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        #div1 {

            position: absolute;

            width: 80px;

            background: #ccc;

        }

    </style>

    <script>

        window.onload = function () {

            //此处写代码

            var oDiv=document.getElementById('div1');

            oDiv.style.display='none';

            document.oncontextmenu=function(ev){

                var oEvent=event||ev;

                oDiv.style.display='block';

                oDiv.style.left=oEvent.clientX+'px';

                oDiv.style.top=oEvent.clientY+'px';

                return false;

            }

            document.onclick=function(){

                oDiv.style.display='none';

            }

        }

    </script>

</head>

<body>

    <div id='div1'>

        <ul>

            <li>aaa</li>

            <li>bbb</li>

            <li>ccc</li>

        </ul>

    </div>

</body>

</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. [NOIP2004] 提高组 洛谷P1092 虫食算

    题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: 43#9865#045 +8468#6633 44445509678 其中# ...

  2. 【Codevs1237&网络流24题餐巾计划】（费用流）

    题意:一个餐厅在相继的 N 天里,每天需用的餐巾数不尽相同. 假设第 i 天需要 ri块餐巾(i=1,2,…,N).餐厅可以购买新的餐巾,每块餐巾的费用为 p 分: 或者把旧餐巾送到快洗部,洗一块需 ...

  3. Jquery判断某个字符串是否在数组中

    使用$.inArray方法判断,如果存在则返回0,不存在返回-1,结果如下: 另外也可以将数组转为字符串,并使用正则表达式处理

  4. P1230 智力大冲浪 洛谷

    https://www.luogu.org/problem/show?pid=1230 题目描述 小伟报名参加中央电视台的智力大冲浪节目.本次挑战赛吸引了众多参赛者,主持人为了表彰大家的勇气,先奖励每 ...

  5. 洛谷—— P2543 [AHOI2004]奇怪的字符串

    P2543 [AHOI2004]奇怪的字符串 题目描述 输入输出格式 输入格式: 输入文件中包含两个字符串X和Y.当中两字符串非0即1.序列长度均小于9999. 输出格式: X和Y的最长公共子序列长度 ...

  6. 学习swift从青铜到王者之字符串和运算符02

    1 字符和字符串初步  var c :Character = "a" 2 构造字符串  let str1 = "hello" let str2 = " ...

  7. Tcl学习之--文件操作

    Tcl中文件名称操作遵循Unix/Linux的命名规范. x/y/z表示x文件夹下的y 子文件夹及y以下的子文件夹z. ~admin/email则表示admin用户的email目录. l  file ...

  8. hive中使用正則表達式不当导致执行奇慢无比

    业务保障部有一个需求,须要用hive实时计算上一小时的数据.比方如今是12点,我须要计算11点的数据,并且必须在1小时之后执行出来.可是他们用hive实现的时候发现就单个map任务执行都超过了1小时, ...

  9. 异步FIFO的编程

    对于异步FIFO.最基本的两个方面是地址控制和空.满标志位的产生.首先地址控制分别为读地址和写地址,每次读写时能读写地址应该加1.计数次数为ram深度的2倍.当读写地址相等时则空标志位有效,当读写地址 ...

  10. [Erlang危机](5.1.4)端口port

      原创文章,转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 或port drivers15.   全程跟踪端口数会对诊断负载或进程泄漏 ...