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

效果示例：

参考代码：

<!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-5583-Kingdom of Black and White（2015ACM/ICPC亚洲区上海站-重现赛）

    Kingdom of Black and White                                                                           ...

  2. 博客搬迁至Gitcafe

    原先的Github pages貌似在国内被墙了,导致搜索引擎一直没有索引到,今天一怒之下迁到Gitcafe 虽然之前的模板用不成,害我重新找了一套,改了好半天,不过总算弄完了

  3. noip模拟赛 旅行

    分析:一个贪心的想法是每次找到根的点权和最大的点进行操作,关键是怎么维护.每次找最大值,修改后会对这条链上每个点的子树上的点造成影响,可以用线段树来维护.找最大值就是区间求最大值嘛,对子树进行操作利用 ...

  4. hdu 3697 贪心

    #include<stdio.h> #include<stdlib.h> #include<string.h> #define inf 0x3fffffff #de ...

  5. php框架之自动加载与统一入口

    现在PHP有很多的框架,基本都是以MVC为基础进行设计的.其实很多框架(像thinkphp,zf,symfont等)都有两个特性,自动加载类文件和统一入口.这里就简单实现以上两个特性. 假设PHP使用 ...

  6. Codeforces Round #343 (Div. 2)【A,B水题】

    A. Far Relative's Birthday Cake 题意: 求在同一行.同一列的巧克力对数. 分析: 水题~样例搞明白再下笔! 代码: #include<iostream> u ...

  7. TCP/IP学习笔记（5）------IP选路

    静态IP选路 一个简单的路由表 选路是IP层最重要的一个功能之一.前面的部分已经简单的讲过路由器是通过何种规则来根据IP数据包的IP地址来选择路由.这里就不重复了.首先来看看一个简单的系统路由表. D ...

  8. 洛谷——P1454 圣诞夜的极光

    P1454 圣诞夜的极光 题目背景 圣诞夜系列~~ 题目描述 圣诞老人回到了北极圣诞区,已经快到12点了.也就是说极光表演要开始了.这里的极光不是极地特有的自然极光景象.而是圣诞老人主持的人造极光. ...

  9. Java电商项目-6.实现门户首页数据展示_Redis数据缓存

    目录 项目的Github地址 需求介绍 搭建Redis集群环境 下面先描述单机版redis的安装 下面将进行Redis3主3从集群环境搭建 基于SOA架构, 创建门户ashop-portal-web门 ...

  10. 加入收藏BUG改善

    <script type="text/javascript"> function add_favorite(a, title, url) { url = url || ...