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

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

<head>

    <title></title>

    <meta charset="GBK">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style type="text/css">

        #drawing

        {

            text-align: center;

            width: 500px;

            height: 500px;

            border: 1px solid blue;

            margin: 0 auto;

            overflow: auto;

            display: block;

        }

        body, div, ul, li

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;

        }

        ul

        {

            list-style-type: none;

        }

        #menu ul

        {

            position: absolute;

            float: left;

            border: 1px solid #979797;

            background: #f1f1f1;

            padding: 2px;

            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);

            width: 230px;

            overflow: hidden;

        }

        #menu ul li

        {

            float: left;

            clear: both;

            height: 24px;

            cursor: pointer;

            line-height: 24px;

            white-space: nowrap;

            padding: 0 30px;

            width: 100%;

            display: inline-block;

        }

        #menu ul li:hover

        {

            background: #E6EDF6;

            border: 1px solid #B4D2F6;

        }

        .skin

        {

            width: 100px;

            padding: 2px;

            visibility: hidden;

            position: absolute;

        }

    </style>

    <script type="text/javascript" src="http://api.51ditu.com/js/ajax.js"></script>

    <script type="text/javascript">

        //-->右键自定义菜单

        window.onload = function () {

            var drawing = document.getElementById('drawing');

            var menu = document.getElementById('menu');

            /*显示菜单*/

            function showMenu() {

                var evt = window.event || arguments[0];

                /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/

                var rightedge = drawing.clientWidth - evt.clientX;

                var bottomedge = drawing.clientHeight - evt.clientY;

                /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/

                if (rightedge < menu.offsetWidth)

                    menu.style.left = drawing.scrollLeft + evt.clientX - menu.offsetWidth + "px";

                else

                /*否则，就定位菜单的左坐标为当前鼠标位置*/

                    menu.style.left = drawing.scrollLeft + evt.clientX + "px";

                /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/

                if (bottomedge < menu.offsetHeight)

                    menu.style.top = drawing.scrollTop + evt.clientY - menu.offsetHeight + "px";

                else

                /*否则，就定位菜单的上坐标为当前鼠标位置*/

                    menu.style.top = drawing.scrollTop + evt.clientY + "px";

                /*设置菜单可见*/

                menu.style.visibility = "visible";

                LTEvent.addListener(menu, "contextmenu", LTEvent.cancelBubble);

            }

            /*隐藏菜单*/

            function hideMenu() {

                menu.style.visibility = 'hidden';

            }

            LTEvent.addListener(drawing, "contextmenu", LTEvent.cancelBubble);

            LTEvent.addListener(drawing, "contextmenu", showMenu);

            LTEvent.addListener(document, "click", hideMenu);

        }

    </script>

</head>

<body>

    <div id="drawing">

    </div>

    <!--自定义右键菜单-->

    <div id="menu" class="skin">

        <ul>

            <li><strong>HTML 学习</strong></li>

            <li>HTML 元素</li>

            <li>HTML 属性</li>

            <li>HTML 标题</li>

            <li>HTML 段落</li>

            <li>HTML 图像</li>

            <li>HTML 表格</li>

            <li>HTML 列表</li>

            <li>HTML 布局</li>

            <li>表单</li>

        </ul>

    </div>

</body>

</html>

　　

html中实现某区域内右键自定义菜单的更多相关文章

  1. React项目中实现右键自定义菜单

    最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...

  2. js实现鼠标右键自定义菜单(弹出层)，并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)

    <table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...

  3. 8.14 右键自定义菜单 更加iframe 内容高度调整 iframe高度 js定时

    <div class="main_contain" id="z_div" style="position: relative;"> ...

  4. VUE 鼠标右键自定义

    需要在区域内右击自定义菜单的DIV绑定contextmenu右击事件 <div   style="width:100% ; z-index: inherit;position: rel ...

  5. 【原】ios的hitTest方法以及不规则区域内触摸事件处理方法

    概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...

  6. 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)

    (前端用重点整理博客地址)链接地址:http://www.cnblogs.com/atree/archive/2011/06/30/jQuery-smartMenu-javascript.html 一 ...

  7. 在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示

    在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示 当我们在VS的C++中使用vector.list.map等这些STL容器,在开启调试的时 ...

  8. ios的hitTest方法以及不规则区域内触摸事件处理方法

    概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...

  9. 【Win 10应用开发】在RichEditBox中使用自定义菜单

    前面给大伙儿简单介绍了RichEditBox控件的基本用法,以及解决其中的一些小问题. 本文咱们来看看如何自定义RichEditBox控件的上下文菜单. 原理比较简单,所以先说一说原理.当RichEd ...

随机推荐

  1. P4279 【[SHOI2008]小约翰的游戏】

    我怎么什么都不会啊\(QAQ\)博弈论怎么和期望一样玄学啊\(QAQ\) 我们分几种情况讨论: \(Case1\):只有一堆且为1,那么后手胜利 \(Case2\):每一堆都是1,那么只需要判断奇偶性 ...

  2. 【loj2263】【CTSC2017】游戏

    题目 小\(R\)和小\(B\)一共完了\(n\)局游戏,第一局小\(R\)获胜的概率为\(p_i\),没有平局,对于第$ i $局游戏: 如果第\(i-1\)局游戏小$ R \(获胜,那么第 局游戏 ...

  3. 安利一个github上面的一个神级库thefuck，Linux命令敲错了，没关系，自动纠正你的命令

    没错就是这么神奇,名字相当噶性,thefuck.当你命令输入错误不要怕,直接来一句fuck,自动纠正你输入的命令. 在你输入错误的命令的时候,忍俊不禁的想来一句fuck,没错你不仅可以嘴上说,命令里面 ...

  4. 【Excel】多条件查找

    例如下图:要求在单元格从C10中根据分类与名称找出相应的数量 1.VLOOKUP函数(数组公式) {=VLOOKUP(A10&B10,IF({1,0},A2:A6&B2:B6,C2:C ...

  5. 2019软工实践_Alpha（4/6）

    队名:955 组长博客:https://www.cnblogs.com/cclong/p/11882079.html 作业博客:https://edu.cnblogs.com/campus/fzu/S ...

  6. java.lang.Error: java.lang.NoSuchMethodError: org.objectweb.asm.ClassWriter.<init>(Z)V

    有时候出现这种怪异的问题,是由于多个版本的class存在. 比如说:某个java编译成class后,放到classes下面,然后lib目录下,也有这个class所在的jar包,这样就导致classpa ...

  7. mysql索引原理及优化（四）

    聚簇索引和非聚簇索引 分析了MySQL的索引结构的实现原理,然后我们来看看具体的存储引擎怎么实现索引结构的,MySQL中最常见的两种存储引擎分别是MyISAM和InnoDB,分别实现了非聚簇索引和聚簇 ...

  8. Java线程的wait(), notify()和notifyAll()

    Java线程生命周期 类java.lang.Thread包含一个静态的State enum用于定义每种可能的状态. 在任意的时间点, 线程会处于以下的状态之一: NEW – 新创建的线程, 还未启动( ...

  9. Hadoop，Spark,Flink 相关KB

    Hive: https://stackoverflow.com/questions/17038414/difference-between-hive-internal-tables-and-exter ...

  10. oracle 存储函数,更新库存

    create procedure PRO_update_Goods_group_stock is v_min_stock , ); v_gg_stock , ); v_goods_no number; ...