<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        #myDiv {

            cursor: context-menu;

        }

        #programMenu {

            padding: 0;

            width: 155px;

            position: absolute;

            visibility: hidden;

            background: #fff;

            color: #006696;

            font-size: 12px;

            border: 1px solid #cccccc;

            border-radius: 5px;

        }

        #programMenu li {

            list-style: none;

            list-style-position: outside;

            height: 25px;

            line-height: 25px;

            cursor: pointer;

            padding-left: 20px;

        }

        #programMenu li:not([class="disabled"]):focus,

        #programMenu li:not([class="disabled"]):hover,

        #programMenu li:not([class="disabled"]):active {

            background: #3f9afa;

            color: #f7fffc;

        }

        #programMenu li.disabled {

            color: #b7b7b7;

        }

    </style>

</head>

<body>

<div id="myDiv">dYou’ve been added to the denstiny-code organization!

    Here are some quick tips for a first-time organization member.

    Use the switch context button in the upper left corner of this page to switch between your personal context (dxdleikai) and organizations you are a member of.

    After you switch contexts you’ll see an organization-focused dashboard that lists out organization repositories and activities. </div>

<ul id="programMenu">

    <li>复制</li>

    <li>粘贴</li>

    <li class="disabled">删除</li>

</ul>

<script>

    var div = document.getElementById('myDiv');

    div.addEventListener('contextmenu', function (e) {

        e.preventDefault();

        var menu = document.getElementById('programMenu');

        menu.style.left = e.clientX + 'px';

        menu.style.top = e.clientY + 'px';

        menu.style.visibility = 'visible';

    }, false);

    document.addEventListener('click', function (e) {
        if (e.which === 1) { // 兼容firefox
            document.getElementById('programMenu').style.visibility = 'hidden';
        }

    }, false);

</script>

</body>

</html>

自定义上下文菜单，contextmenu事件的更多相关文章

  1. 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

    (前端用重点整理博客地址)链接地址:http://www.cnblogs.com/atree/archive/2011/06/30/jQuery-smartMenu-javascript.html 一 ...

  2. Android进阶(二十八)上下文菜单ContextMenu使用案例

    上下文菜单ContextMenu使用案例 前言 回顾之前的应用程序,发现之前创建的选项菜单无法显示了.按照正常逻辑来说,左图中在"商品信息"一栏中应该存在选项菜单,用户可进行分享等 ...

  3. Android菜单详解（四）——使用上下文菜单ContextMenu

    之前在<Android菜单详解(二)——创建并响应选项菜单>和<Android菜单详解(三)——SubMenu和IconMenu>中详细讲解了选项菜单,子菜单和图标菜单.今天接 ...

  4. Android 菜单 之 上下文菜单ContextMenu

    所谓上下文菜单就是当我们长按某一个文件时弹出的菜单 操作这个菜单我们要重写onCreateContextMenu()方法 如上一篇文章一样,对于这个菜单中选型的操作也有动态添加和xml文件添加两种方法 ...

  5. Android 上下文菜单 ContextMenu

    public class MainActivity extends Activity { private ListView listView; @Override protected void onC ...

  6. Mint linux 自定义上下文菜单实现ZIP压缩文件无乱码解压

    1. 前提条件 我的Mint Linux 是Thunar文件管理器(默认的). 2. 配置自定义动作 打开Thunar文件管理器,点击菜单“编辑”=>“配置自定义动作”.点击“+”添加一个新的. ...

  7. windows phone上下文菜单ContextMenu的使用示例

    新建一个WP项目,命名为contextmenu,然后往界面拖入一个ListBox控件listBox1,接着切换到XAML代码界面设置其属性,代码如下 <ListBox Height=" ...

  8. jQuery smartMenu右键自定义上下文菜单插件

    http://www.zhangxinxu.com/wordpress/?p=1667 <%@ page contentType="text/html; charset=UTF-8&q ...

  9. .NET混合开发解决方案13 自定义WebView2中的上下文菜单

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

随机推荐

  1. 4K手机能拯救索尼手机吗？

    智能手机屏幕分辨率究竟达到多少才是极限,一直是业内争论不休的问题.从低分辨率一路走来,直到iPhone 4搭载视网膜屏,业内才有了一个较为统一的认知:屏幕起码要在合适距离下看不到文字.图像虚影,才称得 ...

  2. 什么是AWVS

    什么是AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,现已更新到10.(下 ...

  3. 【年度开源、工具合集】牛津计划，DMTK，Graph Engine…提高你的工作效率！

    本篇合集包括以下三个部分的内容: 1.微软亚洲研究院过去一年的所有开源合集,如分布式机器学习工具包DMTK等. 2.利用微软研究院的技术提高工作效率的工具合集,如让没有机器学习背景的开发人员也能开发出 ...

  4. Errors running builder JavaScript Validator

    问题: 解决方法: 方法一. 选择对应项目—-右键Properties—-Builders—-取消“JavaScript Validator”的勾就OK了 方法二. 找到“.project”文件,找到 ...

  5. jquery.form.js笔记

    由于项目的原因,需要异步上传文件,网上找了找,很多都是用jquery.form插件的,于是乎找资料,调代码,做点小笔记. 官方资料:http://www.malsup.com/jquery/form/ ...

  6. 推荐系统--隐语义模型LFM

    主要介绍 隐语义模型 LFM(latent factor model). 隐语义模型最早在文本挖掘领域被提出,用于找到文本的隐含语义,相关名词有 LSI.pLSA.LDA 等.在推荐领域,隐语义模型也 ...

  7. Java版飞机订票系统

    关注微信公众号:Worldhello 回复 飞机订票系统 可获得系统源代码并可加群讨论交流 数据结构课程设计题目:          [飞机订票系统]            通过此系统可以实现如下功能 ...

  8. 【Spring Data 系列学习】了解 Spring Data JPA 、 Jpa 和 Hibernate

    在开始学习 Spring Data JPA 之前,首先讨论下 Spring Data Jpa.JPA 和 Hibernate 之前的关系. JPA JPA 是 Java Persistence API ...

  9. 初识 “HTML”

    HTML 什么是HTML? ①全称:超文本标记语言②超文本:在普通的文本内容的基础上添加超链接.图片.视频等③标记语言:HTML提供一系列标签④版本:HTML 4.01 HTML声明 1.编码格式:H ...

  10. MySQL数据库无完整备份删库，除了跑路还能怎么办？

    1.背景 前段时间,由于运维同事的一次误操作,清空了内网核心数据库,导致了公司内部管理系统长时间不可用,大量知识库内容由于没有备份险些丢失. 结合这两天微盟的删库跑路事件,我们可以看到,数据库的备份与 ...