正文
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>
