html中实现某区域内右键自定义菜单
<!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中实现某区域内右键自定义菜单的更多相关文章
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- js实现鼠标右键自定义菜单(弹出层)，并与树形菜单(TreeView)、iframe合用(兼容IE、Firefox、Chrome)
<table class="oa-el-panel-tree"> <tr> <td style="vertical-align: top; ...
- 8.14 右键自定义菜单 更加iframe 内容高度调整 iframe高度 js定时
<div class="main_contain" id="z_div" style="position: relative;"> ...
- VUE 鼠标右键自定义
需要在区域内右击自定义菜单的DIV绑定contextmenu右击事件 <div style="width:100% ; z-index: inherit;position: rel ...
- 【原】ios的hitTest方法以及不规则区域内触摸事件处理方法
概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...
- 【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
(前端用重点整理博客地址)链接地址:http://www.cnblogs.com/atree/archive/2011/06/30/jQuery-smartMenu-javascript.html 一 ...
- 在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示
在Visual Studio中使用Debug Visualizers在C++中实现对原始类的自定义调试信息显示 当我们在VS的C++中使用vector.list.map等这些STL容器,在开启调试的时 ...
- ios的hitTest方法以及不规则区域内触摸事件处理方法
概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...
- 【Win 10应用开发】在RichEditBox中使用自定义菜单
前面给大伙儿简单介绍了RichEditBox控件的基本用法,以及解决其中的一些小问题. 本文咱们来看看如何自定义RichEditBox控件的上下文菜单. 原理比较简单,所以先说一说原理.当RichEd ...
随机推荐
- 2017.10.4 国庆清北 D4T2 正方形
题目描述 在一个10000*10000的二维平面上,有n颗糖果. LYK喜欢吃糖果!并且它给自己立了规定,一定要吃其中的至少C颗糖果! 事与愿违,LYK只被允许圈出一个正方形,它只能吃在正方形里面的糖 ...
- js MD5加密与 java MD5加密不一致
因为该项目会部署到多台机器,所以需要用字符生成唯一的MD5,但是js生成的MD5和java生成的MD5不一致.经过博主查阅资料发现java生成MD5用的是utf-8的编码,而且js用的是2进制.那我就 ...
- 读入优化&输出优化
读入优化 int read() { ; ') ; '; ') num=num*+c-'; return ff*num; } 输出优化 void write(int x) { ) { putchar(' ...
- Java 堆栈内存的理解
Java中变量在内存中的分配1). 类变量(static修饰的变量):在程序加载时系统就为它在堆中开辟了内存,堆中的内存地址存放于栈以便高速访问.静态变量的生命周期—一直持续到整个“系统”关闭 2). ...
- debian10使用国内源安装docker以及一些使用方法
首先, 我的环境是debian, 容器是centos debian 安装添加新存储库所需的依赖项 1 sudo apt install ca-certificates curl software-pr ...
- （四）Cisco dhcp snooping实例2-多交换机环境（DHCP服务器和DHCP客户端位于不同VLAN）
试验拓扑 环境:dhcp server和客户端处于不同网段的情况 dhcp server的配置 no ip routing ip dhcp pool vlan27 network 172.28.27. ...
- 安装与配置HSDIS与JITWatch
本作者的系统: 操作系统版本及位数可通过uname -a命令查看,如下: Linux ubuntu 3.13.0-32-generic #57~precise1-Ubuntu SMP Tue Jul ...
- ES6继承小实例
ES6继承小实例 一.总结 一句话总结: js中的类和继承可以多用es6里面的,和其它后端语言的使用方法一样 class Animal { constructor(name) { this.name ...
- Spark2.x（五十四）：在spark structured streaming下测试ds.selectExpr()，当返回列多时出现卡死问题。
业务需求,有一部分动态字段,需要在程序中动态加载并解析表达式: 实现方案1):在MapFunction.MapPartitionFunction中使用FelEngine进行解析: FelEngine ...
- Mysql的utf8与utf8mb4区别，utf8mb4_bin、utf8mb4_general_ci、utf8mb4_unicode_ci区别
UTF-8是使用1~4个字节,一种变长的编码格式,字符编码.mb4即 most bytes 4,使用4个字节来表示完整的UTF-8. mysql的 utf8 编码最大字符长度为 3 字节,如果遇到 4 ...