用到的知识点： 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>实例如下：
JS简单实现自定义右键菜单
原文地址：http://www.cnblogs.com/Windaliu/p/7966407.html