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

效果示例：

参考代码：

<!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. hdu 5029树链剖分

    /* 解:标记区间端点,按深度标记上+下-. 然后用线段树维护求出最小的,再将它映射回来 */ #pragma comment(linker, "/STACK:102400000,10240 ...

  2. restful（3）：认证、权限、频率 & 解析器、路由控制、分页、渲染器、版本

    models.py中: class UserInfo(models.Model): name = models.CharField(max_length=32) psw = models.CharFi ...

  3. 「CodePlus 2017 11 月赛」大吉大利，晚上吃鸡！

    n<=50000,m<=50000的图,给s和t,问有多少点对$(a,b)$满足 嗯. 不会. 首先最短路DAG造出来,然后两个条件转述一下:条件一,$N_a$表示从s到t经过a的路径,$ ...

  4. windows开启远程

    windows开启远程桌面超级简单,跟linux相比太简单了. 补充:有瑕疵,应该是远程中的远程桌面属性打钩,但是W8.1没有这个选项,W7可以,其次创建一个管理员账户,身份是管理员,不是标准用户,要 ...

  5. 洛谷——P1164 小A点菜

    P1164 小A点菜 题目背景 uim神犇拿到了uoi的ra(镭牌)后,立刻拉着基友小A到了一家……餐馆,很低端的那种. uim指着墙上的价目表(太低级了没有菜单),说:“随便点”. 题目描述 不过u ...

  6. Hive之Order,Sort,Cluster and Distribute By

    测试数据 create table sort_test( id int, name string ) row format delimited fields terminated by '\t' li ...

  7. 一个简单的Java文件工具类

    package com.xyworkroom.ntko.util; import java.io.File; import java.io.FileInputStream; import java.i ...

  8. some 算法

    矩阵变换:: 请用一条语句将: arr = [[1, 2, 3, 'a'], [4, 5, 6, 'b'], [7, 8, 9, 'c']] 转换装置矩阵为: [[1, 4, 7], [2, 5, 8 ...

  9. vue watch 深度监控

    比如监控 data中的list

  10. DELL T110II Server如何通过RAID 级别迁移的方式在OMSA下实现磁盘阵列扩容？

    目录: RAID 转移规则说明 操作步骤 本文介绍了 通过RAID 级别转换来实现扩容的方法注意:本文相关RAID的操作,仅供在测试环境里学习和理解戴尔PowerEdge服务器RAID控制卡的功能和使 ...