<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var div1 = document.getElementById("div1");

            var ul1 = document.getElementById("ul1");

            div1.oncontextmenu = function (event) {

                event.preventDefault();

                var left = (event.clientX+10)+"px";

                var right = (event.clientY-15)+"px";

                ul1.hidden = false;

                ul1.style.left = left;

                ul1.style.top = right;

            }

            window.onclick = function (event) {

                ul1.hidden = true;

            }

        }

    </script>

    <style type="text/css">

        ul {

            list-style: none;

            border: 1px red solid;

            background: #00ff90;

            position: absolute;

            padding:2px;

        }

        li {

            margin:20px 0px;

        }

        span {

           margin:5px 10px;

           display:block;

           text-align:center;

        }

    </style>

</head>

<body>

    <div style="width:100px;border:solid 1px blue" id="div1">点击我啊，菜鸡</div>

    <ul hidden="hidden" id="ul1">

        <li><span>新浪微博</span></li>

        <li><span>QQ空间</span></li>

        <li><span>QQ</span></li>

    </ul>

</body>

</html>

利用contextmenu事件，自定义右键的更多相关文章

  1. HTML5事件-自定义右键菜单

    WEB领域中,为实现上下文菜单,开发人员面临的主要问题是如何确定应该显示这个上下文菜单(Windows 中,右键单击:Mac 中,Ctrl+单击), 以及如何屏蔽与该操作相关联的默认上下文菜单. 解决 ...

  2. ASP.NET Aries 入门开发教程8：树型列表及自定义右键菜单

    前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: v ...

  3. HTML5事件——contextmenu 隐藏鼠标右键菜单

    在window中单击右键或在Mac中Ctrl+单击时会触发contextmenu事件,通过取消其默认动作能够提供自己定义菜单. 首先先写一个自己的菜单: <style> ul, li { ...

  4. 阻止右键菜单（阻止默认事件）&&跟随鼠标移动（大图展示）&&自定义右键菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS简单实现自定义右键菜单

    RT,一个简单的例子,仅仅讲述原理 <div id="menu" style="width: 0;height: 0;background: cadetblue;p ...

  6. AS3.0 自定义右键菜单类

    AS3.0 自定义右键菜单类: /** * 自定义右键菜单类 * 自定义菜单项不得超过15个,每个标题必须至少包含一个可见字符. * 标题字符不能超过100个,并且开头的空白字符会被忽略. * 与任何 ...

  7. Extjs 4.2 panel 添加 click 事件及右键菜单

    listeners: { render: function(c) { c.body.on('click', function() { //TODO 添加点击事件功能 }); c.body.on('co ...

  8. 【连载】Bootstrap开发漂亮的前端界面之自定义右键菜单

    连载: 1<教你用Bootstrap开发漂亮的前端界面> 2.<Bootstrap开发漂亮的前端界面之实现原理> 网页中的自定义右键菜单越来越普遍,自定义右键菜单可以增强用户体 ...

  9. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

随机推荐

  1. linux服务器随机10字符病毒/libudev4.so病毒清理的过程

    故障表现:某天晚上突然收到某项目一台web服务器CPU报警,SSH连接困难卡顿,登陆后发现CPU使用率飙升到700%,第一感觉是被黑了,来事了. 故障处理: 1.登陆上后发现有好多莫名的命令(who/ ...

  2. Neo4j入门日志（一）导入数据

    本文主要来源于: neo4j的官方文档 使用的是neo4j官方提供的导入方式,即使用import,在cmd中进行导入. 1.导入的基本方式 bin/neo4j-admin import --datab ...

  3. 使用Oracle的PROFILE对用户资源限制和密码限制

    转至:https://blog.csdn.net/zhuomingwang/article/details/6444240?utm_medium=distribute.pc_relevant.none ...

  4. Chrome：插件安装

    1.首先要下载一油猴插件管理器 得到crx文件 2.打开'扩展程序',在Chrome右上角 3.启动开发者模式(右上角),然后将油猴crx文件拖入界面中,会自动安装油猴 安装完成后,在工具栏中会出现油 ...

  5. 文件上传漏洞之MIME类型过滤

    上传的时候修改Content-Type为image/jpeg等程序指定的类型即可. 修改为: 使用蚁剑连接测试

  6. 【spring源码系列】之【Bean的销毁】

    以"冬奥之光,多彩冰灯"为主题的第四十一届全国专业冰雕比赛在冰城哈尔滨市进入第二天,60名冰雕高手在哈尔滨冰灯艺术游园会园区展开激烈的竞技比拼. 冰雕艺术 1. 概述 Bean的销 ...

  7. 使用 MobaXterm 连接矩池云 GPU服务器

    Host Name(主机名):hz.matpool.com 或 hz-t2.matpool.com,请以您 SSH 中给定的域名为准. Port(端口号):矩池云租用记录里 SSH 链接里冒号后的几位 ...

  8. tp5 git 常见命令

    git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...

  9. Python入门随记（3）

    1.len() 长度或规模函数 2.Unicode转为单字符用chr() 单字符转为Unicode用ord() 3.关于字符的操作函数 函数 作用 lower() 变为小写 upper() 变为大写 ...

  10. NaviCat连接提示驱动程序IM004错误

    今天一打开NaviCat提示驱动程序IM004错误,百度了好几种方法都不起作用,多次尝试后总结出一套方法: 一.到控制面板--卸载程序--卸载NaviCat Clien 注意可能有多个版本的,2008 ...