<!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. django+vue实现跨域

    版本 Django 2.2.3 Python 3.8.8 djangorestframework 3.13.1 django-cors-headers 3.11.0 django实现跨域 说明:此处方 ...

  2. 【C#多态】as 类型检测（原理分析） ---用于多态检

    as(OpCodes.Castclass)功能:测试对象引用(O 类型)是否为特定类的实例.相当于:expression is type ? (type)expression : (type)null ...

  3. 工程师计划1-> 项目管理1 | 项目与项目管理

    这学期报了一门课,项目管理,是一门网课,但跟之前不一样,我期待能够从这门课中学到一些东西.这是我上学期在组织毛概小组大作业时遇到困难时,意识到自己应该学习这门课. 工程师计划其实是一直以来想要把学习的 ...

  4. 2020.9.28 多进程multiprocess 进程池pool 子进程subprocess 进程间通信

    1.multiprocessing模块--跨平台版本的多进程模块 multiprocessing模块提供了一个Process类来代表一个进程对象,下面的例子演示了启动一个子进程并等待其结束: from ...

  5. 安装CentOS 7

    1．安装引导 首先要设置计算机的启动顺序为CD-ROM或USB 启动,保存设置后将CD放入光驱或插入USB,重新启动计算机. 计算机重启后显示有几个选项的引导菜单.如果在 60 秒内没有按任何键,则运 ...

  6. 『现学现忘』Docker基础 — 14、Docker的卸载

    目录 1.查询Docker安装过的包 2.卸载Docker软件包 3.删除残留目录 4.验证是否卸载 5.20版本Docker卸载(官方文档) 1.查询Docker安装过的包 执行yum list i ...

  7. elasticsearch的安装与使用

    1:官网进行下载 https://www.elastic.co/cn/elasticsearch/ 2:这里我用的是7.15.2 3:进行下载解压至d 盘 4:接下来我们cmd 切换目录进行运行 5: ...

  8. pd.cut和pd.qcut（）之间的区别

  9. es6 快速入门 系列 —— 对象

    其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...

  10. python 装饰器的使用

    装饰器本质上是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓存.权 ...