标签：title http logs pre lang lis 顺序 one 事件
用到的知识点： oncontextmenu(右键点击事件,指用户右击鼠标时触发并打开上下文菜单)
所以，我们要知道的就是，在触发contextmenu事件时，取消默认行为(也就是阻止浏览器显示自带的菜单)
通过传入的事件对象，来确定鼠标的点击位置，作为left和top的值来进行元素的定位，并显示自定义菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>右键菜单</title> <style> /*清除reset css*/ ul{ padding:0; margin: 0; list-style: none; } /*main*/ #list{ width:160px; height:200px; border:1px solid #f4979a; box-shadow:0px 0px 5px #f4979a; display: none; /*一定要用绝对定位*/ position: absolute; } #list li{ height:50px; line-height:50px; font-size:16px; color:#ea6a66; text-align:center; } </style> </head> <body> <ul id="list"> <li>下载</li> <li>删除</li> <li>移动到...</li> <li>重命名</li> </ul> </body> <!--js--> <script> //************获取元素*********** var listBox = document.getElementById(‘list‘);//获取自定义右键菜单 //鼠标右键点击事件 document.oncontextmenu = function(ev){ //兼容性写法示例： var ev = ev || event;//或（||）书写顺序有讲究，不能随意换 //阻止默认行为 ev.preventDefault(); //记录当前的坐标(x轴和y轴) var x = ev.clientX; var y = ev.clientY; listBox.style.display = ‘block‘;//右键点击时显示菜单框 listBox.style.left = x + ‘px‘; listBox.style.top = y + ‘px‘; //关闭右键 document.onclick = function(){ listBox.style.display = ‘none‘;//再次点击时隐藏菜单框 } } </script> </html>
实例如下：
标签：title http logs pre lang lis 顺序 one 事件
原文地址：http://www.cnblogs.com/Windaliu/p/7966407.html
