<!doctype html><html><head><meta charset="utf-8"><title>网页右键菜单</title><!-- 思路：1.写出右键点击事件；2.写出菜单功能；3.关联右键功能和菜单，学习使用定位--><style>#test { ???width: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; ???width: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>js ?右键菜单
原文地址：http://www.cnblogs.com/qq735675958/p/7661835.html