<!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. 哪些BI分析商业智能平台是最受欢迎的？

    近些年来,AI推动的云生态系统已非常成熟.智能.增强的预测和决策工具处于这样一个阶段:准备好部署到企业中从董事会到车间的各个地方.挑战在于确保贵企业已准备好使用它们.因此,下面介绍了眼下最出色.最受欢 ...

  2. Java：各版本官方文档

    JDK16:https://docs.oracle.com/en/java/javase/16/docs/api/index-files/index-1.html JDK15:https://docs ...

  3. Go基础知识梳理（一）

    Go基础知识梳理(一) Go中package的用法及作用 package hello 用于分包,Go通过包来管理命名空间 import ( "hello" //通过import关键 ...

  4. Linux CentOS7.X-安装jdk

    一.下载 jdk 的 tar 包 网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.h ...

  5. 别再问WiFi密码了，HMS Core统一扫码服务让手机一键联网

    现代生活离不开网络.在餐厅.商场等公共场所,手机连接WiFi一直是高频使用场景.虽然公共场所的免费WiFi越来越多,但网络连接过程却很麻烦.有的需要打开网页注册或点击广告链接才能上网,还有的要求下载特 ...

  6. 二级py--day6数据库设计基础

    二级py-- 数据库设计基础 1.数据定义语言(DDL):该语言负责数据的模式定义与数据的物理存取构建 2.数据操纵语言(DML):该语言负责数据的操纵,包括查询及总删改等操作 3.数据控制语言(DC ...

  7. 【SQL】数据库运维实习工作经验

    1.导入表格的时候回出现类型不对应的问题,T-SQL代码如下: USE zzzj2017 ALTER TABLE CJ ALTER COLUMN 付款时间 datetime    2.删除 USE s ...

  8. C++ STL vector扩容原理分析

    扩容特点: 1)新增元素:vector通过一个连续的数组存放元素,如果集合已满,在新增数据的时候,就要分配一块更大的内存,将原来的数据复制过来,释放之前的内存,在插入新增的元素: 2)对vector的 ...

  9. Net中委托之三委托的高级应用

    1. 使用委托来解决逻辑分离,解除耦合 2.委托的高级应用实例 using System; using System.Collections.Generic; using System.Linq; u ...

  10. Numpy库基础___五

    Numpy数据存取 •NumPy的随机数函数 a = np.random.rand(1,2,3) print(a) #[[[0.03339719 0.72784732 0.47527802] # [0 ...