<!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. windows 应用商店常用软件

    QuickLook 这个应用可以让你,用空格键查看几乎任何文件的信息. 例如快速查看图片,播放视频,阅读 PDF 等等,支持的格式多到吓人.  Python 没错,就是那个非常火的编程语言,Pytho ...

  2. C#（1）：XML DOM、System.Xml.XmlDocument

     一.XML DOM概述 XML 文档大小写敏感.属性用引号括起来,每一个标记都要闭合. DOM是XML文档的内存中树状的表示形式. 继承关系图: XmlNode;//XML节点 ......Xml ...

  3. linux下通过脚本方式对中间件weblogic进行补丁升级

    转至:http://bbs.learnfuture.com/topic/48 linux下通过脚本方式对中间件weblogic进行补丁升级 刘五奎 [摘要] 在运维行业,系统或软件漏洞每每牵动着每一个 ...

  4. bower install 报错fatal: unable to access 'https://github.com/angular/bower-angular-touch.git/'类错误解决方法

    bower install时出现很多unable to access 'https://github.com/angular/bower-angular-touch.git/'类似的错误, 方法一:( ...

  5. 推动式&拉动式生产

    拉动式:订单发给最后一个单元 推动式:订单发给第一个单元

  6. 矩池云 | 使用LightGBM来预测分子属性

    今天给大家介绍提升方法(Boosting), 提升算法是一种可以用来减小监督式学习中偏差的机器学习算法. 面对的问题是迈可·肯斯(Michael Kearns)提出的:一组"弱学习者&quo ...

  7. kube-scheduler源码分析（3）-抢占调度分析

    kube-scheduler源码分析(3)-抢占调度分析 kube-scheduler简介 kube-scheduler组件是kubernetes中的核心组件之一,主要负责pod资源对象的调度工作,具 ...

  8. python库安装中Microsoft Visual C++ is required解决方法

    在用pycharm过程中,用pip去安装一些第三方包的时候会出现如下错误,缺少C++编译器,因为有些程序需要使用,没有C++接口会报错,查阅相关资料及自己的解决方案 error: Microsoft ...

  9. k8s线上某些特殊情况强制删除 StatefulSet 的 Pod 要考虑什么隐患？

    k8s线上某些特殊情况强制删除 StatefulSet 的 Pod 要考虑什么隐患? 考点之什么情况下,需要强制删除 StatefulSet 的 Pod? 考点之如果 StatefulSet 操作不当 ...

  10. js数组和对象的区别,ajax传入多个参数值,ajax传多个数组数据

    数组分为索引数组和关联数组 js中先声明一个空数组 arr = [] 索引数组 索引是整数,如arr[0] = 'a' 关联数组 索引是自定义的字符串,如arr['a'] = 'a' js中的对象 你 ...