在操作系统中,通过单击鼠标右键,可以调出上下文菜单,在web页面中,也可以实现类似的功能,实现的方式是通过注册给元素注册contexmeun事件,该事件是冒泡的,因此可以为document指定一个事件处理器(类似的事件委托方式),用于处理该类事件,由于该事件输入鼠标类事件,所以可以通过事件对象获取到鼠标的坐标。此外通过mouseout和mouseover事件来决定上下文菜单的出现和消失。
<!DOCTYPE html>
<html>
<meta charset='utf-8'>
<head>
<title> HTML5 EVENT-contextmeau</title>
<style type="text/css">
.contextMenu {
position: absolute;
z-index: 0;
visibility: hidden;
list-style-type: none;
margin:0px;
padding:0px;
font-size: 11px;
width: 82px;
background-color: #fcfcfc;
}
.contextMenu li{
width: 80px;
height: 30px;
border:1px solid grey;
display: block;
text-align: center;
vertical-align: middle;
line-height: 30px;
l
}
#nav{
border: 1px solid green;
}
</style>
</head>
<body>
<div id='nav'>
this is