右键菜单，顾名思义，当鼠标右键时，弹出一个菜单，而且应该是鼠标在哪点，哪出现菜单才对，最后当鼠标点击别处时，菜单消失。这个效果需要我们掌握什么知识点呢？ ####常见事件 本例中着重用到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>