直接看效果如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>右键菜单</title><style> body { margin:0; padding:0; font-size:12px; font-family:Verdana 微软雅黑; } a { color:#000; text-decoration:none; } .menu { 72px; height:auto; position:absolute; display:none; background:#f0f0f0; border:solid #ccc 1px; } ul { padding:0; margin:0; list-style:none; 70px; } ul li { padding-left:4px; margin-left:1px; } ul li:hover { border:solid #ccc 1px; background:#fafafa; } </style></head><body><div onclick="hiMenu.hideMenu();" id="divMain" style=" 600px; height:350px; margin:50px auto; border:solid #ccc 1px;" oncontextmenu="hiMenu.show();return false;" data-mce-style=" 600px; height: 350px; margin: 50px auto; border: solid #ccc 1px;"><br /></div><div class="menu" id="divMenu"><ul><li><a href="#" data-mce-href="#">暗黑</a></li><li><a href="#" data-mce-href="#">魔兽</a></li><li><a href="#" data-mce-href="#">实况</a></li><li><a href="#" data-mce-href="#">反恐</a></li></ul></div><script type="text/javascript"> var hiMenu = { main: document.getElementById("divMain"), menu: document.getElementById("divMenu"), pos: {}, init: function() { var _this = this; this.main.onmousemove = function(e) { _this.getMousePos(e); } }, show: function() { var mx = this.pos['X']; var my = this.pos['Y']; this.menu.style.left = (mx - 10) + 'px'; this.menu.style.top = (my - 10) + 'px'; this.menu.style.display = 'block'; return false; }, hideMenu: function(obj) { this.menu.style.display = 'none'; }, getMousePos: function(e) { var e = e || window.event; this.pos['X'] = e.clientX; this.pos['Y'] = e.clientY; } } hiMenu.init(); </script></body></html>