<!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. 悖论当道，模式成空：汽车O2O真是死得其所？

    O2O热潮的兴起似乎来得颇为蹊跷--或许是线上连接线下的模式太过空泛,具有极大的包容性,让各个行业都忍不住在其中横插一脚.在经历过最初的崛起和后来的火爆之后,最终形成目前的寒冬.究其原因,O2O并不是 ...

  2. 安卓权威编程指南 挑战练习（第26章 在 Lollipop 设备上使用 JobService）

    26.11 挑战练习:在 Lollipop 设备上使用 JobService 请创建另一个 PollService 实现版本.新的 PollService 应该继承 JobService 并使用 Jo ...

  3. 如何使用@import导入实现了ImportBeanDefinitionRegistrar接口的类？

    如何使用@import导入实现了ImportBeanDefinitionRegistrar接口的类?   在程序开发的时候,我们经常会遇见一个名词“接口”这也是我们做开发人员工作中必不可少的一个技术, ...

  4. WordPress鼠标点击特效和粒子插件

    鼠标特效 将下面代码复制到外观-主题编辑器-主题页脚(footer.php)代码<?php wp_footer(); ?>上方. <script type="text/ja ...

  5. Django开发框架知识点

    一.什么是web服务器(了解) 当我们在浏览器输入URL后,浏览器会先请求DNS服务器,获得请求站点的 IP 地址.然后发送一个HTTP Request(请求)给拥有该 IP 的主机,接着就会接收到服 ...

  6. 多道技术 进程 线程 协程 GIL锁 同步异步 高并发的解决方案 生产者消费者模型

    本文基本内容 多道技术 进程 线程 协程 并发 多线程 多进程 线程池 进程池 GIL锁 互斥锁 网络IO 同步 异步等 实现高并发的几种方式 协程:单线程实现并发 一 多道技术 产生背景 所有程序串 ...

  7. R|生存分析 - KM曲线 ，值得拥有姓名和颜值

    本文首发于“生信补给站”:https://mp.weixin.qq.com/s/lpkWwrLNtkLH8QA75X5STw 生存分析作为分析疾病/癌症预后的出镜频率超高的分析手段,而其结果展示的KM ...

  8. 基于正向扫描的并行区间连接平面扫描算法（IEEE论文）

    作者: Panagiotis Bouros ∗Department of Computer ScienceAarhus University, Denmarkpbour@cs.au.dkNikos M ...

  9. django 从零开始 3认识url解析

    在视图函数中定义一个函数abc 接受得到的参数 并显示在页面上 urls中设置 在页面会显示出错误  找不到该url ,原因是django1版本中使用的是url和re_path ,突然django2变 ...

  10. css3 scale 缩放出现 1px 问题

    问题描述 先来一段html代码 <div class="container"> <div class="parent"> <div ...