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

效果示例：

参考代码：

<!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. [BZOJ1179] [Apio2009]Atm（tarjan缩点 + spfa）

    传送门 题意 N个点M条边的有向图 每个点有点权 从某一个结点出发 问能获得的最大点权和 一个点的点权最多被计算一次 N<=500000 M<=500000 思路 先tarjan缩点,然后 ...

  2. noip模拟赛 道路分组

    分析:因为每一组编号都是连续的嘛,所以能分成一组的尽量分,每次加边后dfs判断一下1和n是否连通.有向图的判连通没有什么很快的方法,特别注意,并查集是错的!这个算法可以得到60分. 事实上每一次都不需 ...

  3. memcache适用和不适用场景[转载]

    适用memcached的业务场景:1)如果网站包含了访问量很大的动态网页,因而数据库的负载将会很高.由于大部分数据库请求都是读操作,那么memcached可以显著地减小数据库负载.2)如果数据库服务器 ...

  4. linux 磁盘配额配置

    1. 添加一块新磁盘 ,分区 .格式化 .(mkfs.etx3 /dev/sdc5/) 2.设置开机自动挂载(vi /etc/fstab) 添加磁盘配额支持 (用户配额usrquota.组配额grpq ...

  5. [bzoj1430]小猴打架_prufer序列

    小猴打架 bzoj-1430 题目大意:题目链接. 注释:略. 想法: 我们发现打架的情况就是一棵树. 我们只需要把确定树的形态然后乘以$(n-1)!$表示生成这棵树时边的顺序. 一共$n$个节点我们 ...

  6. 洛谷——P1832 A+B Problem（再升级）

    P1832 A+B Problem(再升级) 题目背景 ·题目名称是吸引你点进来的 ·实际上该题还是很水的 题目描述 ·1+1=? 显然是2 ·a+b=? 1001回看不谢 ·哥德巴赫猜想 似乎已呈泛 ...

  7. MySQL主主复制搭建教程收集（待实践）

    先收集,后续再实践. http://www.cnblogs.com/ahaii/p/6307648.html http://blog.csdn.net/jenminzhang/article/deta ...

  8. JSP的隐藏对象

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/implicit-objects.html: JSP隐式对象是Java对象,JSP容器使隐式对象在每一个页 ...

  9. Android GIS开发系列-- 入门季（11） Callout气泡的显示

    一.气泡的简单显示 首先我们要获取MapView中的气泡,通过MapView的getCallout()方法获取一个气泡.看一下Callout的简单介绍: 大体的意思是通过MapView获取Callou ...

  10. 淘宝后台添加颜色尺码动态sku

    废话不多说,直接上代码,用了vue,可直接copy运行 <!DOCTYPE html> <html lang="en"> <head> < ...