<!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数字化转型的实战攻略！

    党的十九大报告提出,要推动互联网.大数据.人工智能和实体经济深度融合.更加高效地获取.运用信息,成为企业具有强大竞争力的重要标志.我国企业应牢牢把握历史性机遇,以更加开放的姿态,积极拥抱新经济,积极参 ...

  2. 【windows 操作系统】【CPU】用户模式和内核模式（用户层和内核层）

    所有的现代操作系统中,CPU是在两种不同的模式下运行的: 注意以下内容来自微软: windows用户模式和内核模式 运行 Windows 的计算机中的处理器有两个不同模式:用户模式 和内核模式 . 用 ...

  3. C# StopWatch程序性能_时间计时器

    StopWatch 时间计数器简介: Stopwatch 可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.一般用来测量代码执行所用的时间或者计算性能数据,在优化代码性能上可以使用S ...

  4. System.Console.WriteLine() 调用原理

    1.System.Console.WriteLine(类的实例)默认调用类的Tostring()方法.如果自定义的新类未override ToString()方法.那么调用Object.ToStrin ...

  5. MySQL 8.0.25 MSI Install 安装过程

    官网下载地址: https://dev.mysql.com/downloads/mysql   其中web-community需要联网安装,另外一个可以离线安装.我下载的是离线安装包.   1.双击安 ...

  6. Service层抽象规范

    Service层是整个web系统的负责业务逻辑一块,最有必要实现抽象,Service层要达到复用性,低耦合性.那么该如何抽象呢?一般遵循以下原则 1.单一职责(SRP) 2.开放-封闭(OCP) 3. ...

  7. Qt：QThread

    0.说明 QThread提供了一种与平台无关的线程管理方法. 一个QThread对象管理一个线程.QThread通过run()方法启动线程.默认情况下,run()方法通过exec()启动一个事件循环, ...

  8. 使用MASA Blazor开发一个标准的查询表格页

    前言 大家好,我是开源项目 MASA Blazor 主要开发者之一,如果你还不了解MASA Blazor,可以访问我们的 官网 和博客 <初识MASA Blazor> 一探究竟.简单来说, ...

  9. think php 图像加水印

    1.将下载好的字体引入至 thinkPHP 框架的public/static 下(这里我建了一个文件夹叫font) (1.) (2.)   2.将字体路径写入config.php中 'font'=&g ...

  10. PHP pdf转png windows版本

    链接:https://pan.baidu.com/s/1Bli-2HkucRTYTeujkcsmjg&shfl=sharepset 提取码:2une 1.php_imagick扩展 (1)下载 ...