<!DOCTYPE html>
<html>
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=gbk"
>
<script src=
"http://api.51ditu.com/js/ajax.js"
></script>
<style type=
"text/css"
>
#container {
text-align : center;
width : 500px;
height : 500px;
border : 1px solid blue;
margin : 0 auto;
}
.skin {
width : 100px;
border : 1px solid gray;
padding : 2px;
visibility : hidden;
position : absolute;
}
div.menuitems {
margin : 1px 0;
}
div.menuitems a {
text-decoration : none;
}
div.menuitems:hover {
background-color :
#c0c0c0;
}
</style>
<script>
window.onload =
function
() {
var
container = document.getElementById(
'container'
);
var
menu = document.getElementById(
'menu'
);
/*显示菜单*/
function
showMenu() {
var
evt = window.event || arguments[0];
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
var
rightedge = container.clientWidth-evt.clientX;
var
bottomedge = container.clientHeight-evt.clientY;
/*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
if
(rightedge < menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth +
"px"
;
else
/*否则，就定位菜单的左坐标为当前鼠标位置*/
menu.style.left = container.scrollLeft + evt.clientX +
"px"
;
/*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
if
(bottomedge < menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight +
"px"
;
else
/*否则，就定位菜单的上坐标为当前鼠标位置*/
menu.style.top = container.scrollTop + evt.clientY +
"px"
;
/*设置菜单可见*/
menu.style.visibility =
"visible"
;
LTEvent.addListener(menu,
"contextmenu"
,LTEvent.cancelBubble);
}
/*隐藏菜单*/
function
hideMenu() {
menu.style.visibility =
'hidden'
;
}
LTEvent.addListener(container,
"contextmenu"
,LTEvent.cancelBubble);
LTEvent.addListener(container,
"contextmenu"
,showMenu);
LTEvent.addListener(document,
"click"
,hideMenu);
}
</script>
</head>
<body>
转载请注明原文地址: https://ju.6miu.com/read-150106.html
