<!DOCTYPE html>
<html>
<head>
<title>JS实现自定义右键菜单</title>
<meta http-equiv=
"content-type"
content=
"text/html; charset=utf-8"
>
<script src=
"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;
if
(rightedge < menu.offsetWidth)
menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth +
"px"
;
else
menu.style.left = container.scrollLeft + evt.clientX +
"px"
;
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>
<div id=
"menu"
class
=
"skin"
>
<div
class
=
"menuitems"
>
<a href=
"javascript:history.back();"
>后退</a>
</div>
<div
class
=
"menuitems"
>
<a href=
"javascript:history.back();"
>前进</a>
</div>
<hr>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>地图api</a>
</div>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>实时交通</a>
</div>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>地图搜索</a>
</div>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>驾驶导航</a>
</div>
<hr>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>灵图UU</a>
</div>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>路书下载</a>
</div>
<hr>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_blank"
>关于本站</a>
</div>
<div
class
=
"menuitems"
>
<a href=
""
target=
"_bland"
>友情链接</a>
</div>
</div>
<div id=
"container"
>
<p>右键此区域</p>
</div>
</body>
</html>