右键菜单,顾名思义,当鼠标右键时,弹出一个菜单,而且应该是鼠标在哪点,哪出现菜单才对,最后当鼠标点击别处时,菜单消失。这个效果需要我们掌握什么知识点呢?
- ####常见事件 本例中着重用到oncontextmenu 当弹出右键菜单时发生
- ####鼠标距离左面的距离e.clientX ,而且这个值是不带单位的,如果定位的话,一定要加上字符串拼接 + “px”
- ####浏览器默认情况下,右键也会弹出菜单,所以,要知道阻止浏览器默认行为的语句 return false;
- ####e的兼容性,e= e|| window.event;
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(){
oUl1.style.display = "block";
return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
}
但此时位置不对,应该是鼠标点哪,哪出现菜单,给ul绝对定位,不能是relative,因为relative空间不释放,我们必须要求他释放空间,脱离文档流才行
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
}
</script>
差点忘了e的兼容性
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
}
此时应该考虑,当菜单栏出现后,鼠标按别的地方,菜单栏应该消失
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
}
document.onclick = function(){
oUl1.style.display = "none";
}
</script>
到此为止,基本的右键菜单就完成了,如果你还想加点啥,譬如说,点击菜单中每个选项的时候,弹出每个选项的内容
所以用this
so.加了输出每项内容的右键菜单栏的全部代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style : none;
}
#ul1{
width: 100px;
border: 1px solid #ff0000;
border-radius:5px;
padding: 5px 0;
display: none;
position:absolute;
}
#ul1 li{
height: 24px;
line-height:24px;
text-align:center;
color:#555;
font-size:12px;
}
#ul1 li:hover{
background: #00ff00;
}
</style>
</head>
<body>
<ul id="ul1">
<li>二哈</li>
<li>金毛</li>
<li>泰迪</li>
<li>萨摩</li>
</ul>
<script>
var oUl1 = document.getElementById("ul1");
document.oncontextmenu = function(e){
e = e || window.event;
oUl1.style.display = "block";
oUl1.style.left = e.clientX +"px";
oUl1.style.top = e.clientY + "px";
return false;//阻止浏览器默认行为,因为浏览器默认有一个右键显示菜单,所以要去掉
}
document.onclick = function(){
oUl1.style.display = "none";
}
var aLi = oUl1.getElementsByTagName("li");
for(var i=0; i< aLi.length;i++){
aLi[i].onclick = function(){
console.log(this.innerHTML);
}
}
</script>
</body>
</html>