<!DOCTYPE html>

<html>

<head>

    <title>ContextMenu Event Example</title>

    <script type="text/javascript" src="EventUtil.js"></script>

</head>

<body>

    <div id="myDiv">Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.</div>

    <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver">

        <li><a href="http://www.nczonline.net">Nicholas' site</a></li>

        <li><a href="http://www.wrox.com">Wrox site</a></li>

        <li><a href="http://www.yahoo.com">Yahoo!</a></li>

    </ul>

    <script type="text/javascript">

        EventUtil.addHandler(window, "load", function(event){

            EventUtil.addHandler(document, "contextmenu", function(event){

                event = EventUtil.getEvent(event);

                EventUtil.preventDefault(event);

                var menu = document.getElementById("myMenu");

                menu.style.left = event.clientX + "px";

                menu.style.top = event.clientY + "px";

                menu.style.visibility = "visible";

            });

            EventUtil.addHandler(document, "click", function(event){

                document.getElementById("myMenu").style.visibility = "hidden";

            });

        });

    </script>

</body>

</html>

contextMenu,右键菜单的更多相关文章

  1. 3种不同的ContextMenu右键菜单演示

    简单使用的右键菜单,希望能帮助大家.下面是截图和实例代码 实例预览 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  2. vue2.0的contextmenu右键菜单

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  3. WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法

    原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法 问题描述 今天发现如果我想在一个TextBlock弄一个右键菜单,并且使用Command绑定,结果发 ...

  4. [xPlugins] jQuery Contextmenu右键菜单

    [2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...

  5. JQuery之ContextMenu(右键菜单)

    插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.tre ...

  6. Bootstrap 树形列表与右键菜单

    Bootstrap 树形列表与右键菜单 介绍两个Bootstrap的扩展 Bootstrap Tree View 树形列表 jQuery contextMenu 右键菜单 Demo采用CDN分发,直接 ...

  7. JS组件系列——Bootstrap右键菜单解决方案：ContextMenu

    前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...

  8. jQuery右键菜单contextMenu使用实例

    在最近项目中需要频繁的右键菜单操作.我采用了contextMenu这款jQuery插件. 参考网址:http://www.jb51.net/article/58709.htm 官网demo http: ...

  9. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

随机推荐

  1. Linux运维常用的命令详解

    1. 查看系统内核版本 [root@funsion geekxa]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m 显示了系 ...

  2. 手写js代码（一）javascript数组循环遍历之forEach

    注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...

  3. Fix a Tree

    Fix a Tree A tree is an undirected connected graph without cycles. Let's consider a rooted undirecte ...

  4. 计算n!的位数<Math>

    题意:如题目. 方法一:<TLE> * 可设想n!的结果是不大于10的M次幂的数,即n!<=10^M(10的M次方),则不小于M的最小整数就是 n!的位数,对 * 该式两边取对数,有 ...

  5. Android开发之InstanceState详解(转)---利用其保存Activity状态

    Android开发之InstanceState详解   本文介绍Android中关于Activity的两个神秘方法:onSaveInstanceState() 和 onRestoreInstanceS ...

  6. android 修改listview item view 的方法(转)

    android 修改listview item view 的方法   具体的解答办法很简单: 代码如下 : 1.获取需要更新的view int visiblePosition = mListView. ...

  7. android usb挂载分析----vold启动

    http://blog.csdn.net/new_abc/article/details/7396733 前段时间做了下usb挂载的,现在出了几个bug,又要把流程给梳理下,顺便也把相关的知识总结下, ...

  8. 关于OC和Swift使用GIT创建项目

    1.先进入码云,点击自己的头像 ->   ,2.里面有一个SSH公钥,点击   ,3.之后在终端输入 ssh-keygen -t rsa -C “xxxxx@xxx.com”,注意:”” 要用英 ...

  9. 自己动手编译octave 4.0.0

    今天在做作业的时候,发现imread不能使用,说要安装相应的图形包,可是要安装image时,却发现要求4.0.0版本,而我本机的linux系统ubuntu15.04只有3.8.x的安装源,没办法,只能 ...

  10. Linux/hp unix/AIX日常巡检脚本（转）

    以下为Linux/hp unix/AIX日常巡检脚本,大家可以参考着进行改写,用于自己的服务器. #!/usr/bin/ksh syserrdate=`date +"%m/%d"` ...