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

效果示例：

参考代码：

<!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 4745 最长回文子序列

    题目大意 两只青蛙朝不同方向条,每次都到达值相同的位置,不能重复到达自己到过的地方,且不能飞跃已到过的地方 我们可以理解为这两只青蛙分别把整个序列遍历了一遍,依次走过所有的点,找到最多相同的点的个数, ...

  2. Ubuntu12.04之SSH

    Ubuntu 12.04 关于SSH的知识 (1)安装完ubuntu系统12.04. (2)查看网络配置,输入命令ip addr后,显示有IP地址. (3)使用SSH终端工具Xshell连接系统,发现 ...

  3. AtCoder Grand Contest 012 D Colorful Balls

    题意: 有N个球排成一行,第i个球颜色为ci, 权为wi, 如果两个同色球权值和 <= X 则它们可以交换: 如果两个异色球权值和 <= Y 则它们可以交换:不限制交换次数,求能到达的颜色 ...

  4. Codeforces 799E（贪心）

    题意: 有n个物品,购买物品i需要花费ci的代价.Arkady和Masha分别有喜欢的物品. 现在需要从中选m个,使得这m个物品中至少有k个Arkady喜欢的物品,k个Masha喜欢的物品. 输出满足 ...

  5. win10笔记本相机打开黑屏无法打开笔记本相机

    打开注册表编辑器(WINDOWS图标+R,或者右击左下角微软图标选择“运行(R)”),在出现的窗口输入regedit并回车(Enter)确定   进入HKEY_LOCAL_MACHINE \ SOFT ...

  6. MongoDB小结10 - update【upsert】

    upsert是一个选项,它是update的第三个参数,并不是一个方法.它是一种特殊的更新,要是没有文档符合匹配,那么它就会根据条件和更新文档为基础,创建新的文档,如有匹配,则正常更新.咱们之前见到的所 ...

  7. tmux还有这种操作，我在这边的窗口上操作，你那边可以实时的看到我的操作，厉害了

  8. Network problem solving flow chart

    来自为知笔记(Wiz)

  9. Spark修炼之道（基础篇）——Linux大数据开发基础：第二节：Linux文件系统、文件夹（一）

    本节主要内容 怎样获取帮助文档 Linux文件系统简单介绍 文件夹操作 訪问权限 1. 怎样获取帮助文档 在实际工作过程其中,常常会忘记命令的使用方式.比如ls命令后面能够跟哪些參数,此时能够使用ma ...

  10. C# .NET想要另存一个项目，sln文件丢了怎么办

    如下图所示,我想要另存一个工程,把 V4.4整个的项目另存为V4.5,我可以把解决方案文件(.sln)改名字,但是我没法把文件夹改名字,改了打开sln就说找不到.   很简单的一个思路是反正sln是多 ...