<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页右键菜单</title> <!-- 思路： 1.写出右键点击事件； 2.写出菜单功能； 3.关联右键功能和菜单，学习使用定位 --> <style> #test { 200px; height:200px; background-color:green; } ul.context-menu { padding:0; margin:0; display:none; position:absolute; /*只能是absolute或fixed*/ } ul.context-menu li { list-style:none; 100px; height:20px; line-height:20px; text-align:center; border:solid 1px; background-color:#CCC; display:block; } ul.context-menu li:hover { background-color:#C0C0C0; cursor:context-menu; } </style> <script> //var t = document.getElementById("test"); window.onload = function(){ var clicked_ele;//全局变量，用于记录被右键单击呼出菜单的元素 //去掉默认的contextmenu事件，否则会和右键事件同时出现。 document.getElementById("test").oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("ct").oncontextmenu = function(e){ e.preventDefault(); }; document.getElementById("test").onmousedown = function(e){ if(e.button ==2){//右键 var x = e.clientX;//获取鼠标单击点的X坐标 var y = e.clientY;//获取鼠标单击点的Y坐标 //设置菜单的位置 document.getElementById("ct").style.left = x + "px"; document.getElementById("ct").style.top = y + "px"; document.getElementById("ct").style.display = "block"; clicked_ele = this; }else if(e.button ==0){ //左键 document.getElementById("ct").style.display = "none"; }else if(e.button ==1){ //按下滚轮 document.getElementById("ct").style.display = "none"; } } document.getElementById("test").onblur = function(e){ document.getElementById("ct").style.display = "none"; } //给每个菜单项添加事件处理 var items = document.getElementsByClassName("context-menu-item"); for(var i=0; i < items.length; i++){ //在定义onclick事件之前，c必须设置取消test元素的onblur事件，否则onclick事件失效，因为click先触发的是test元素的onblur事件，该事件有移除菜单的操作，才会导致后面的代码失效 items.item(i).onmouseover = function(e){ document.getElementById("test").onblur = undefined; } //鼠标移出菜单时，还是要将test的onblur事件还原 items.item(i).onmouseleave = function(e){ document.getElementById("test").onblur = function(e){ document.getElementById("ct").style.display = "none"; } } items.item(i).onclick = function(e){ e.stopPropagation();//为避免引起其它错误，阻止冒泡很重要 console.log(this.innerHTML + ":" + clicked_ele.innerHTML); document.getElementById("ct").style.display = "none"; } } } </script> </head> <body> <ul class="context-menu" id="ct"> <li class="context-menu-item">option1</li> <li class="context-menu-item">option2</li> <li class="context-menu-item">option3</li> </ul> <div id="test" tabindex="2">我是美腻大方的绿方块</div> </body> </html>