自定义右键菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义右键菜单</title>
<style>
*{margin:0;padding:0;}
ul{display:none;list-style:none;width:80px;height:100px;border:1px solid #000;position: absolute;}

//要注意样式的设置,ul要设置宽高和绝对定位,才能移动;外边距内边距设为0,才能与鼠标贴近,不然会有距离。
</style>
<script src="jquery-1.9.1.js"></script>
<script>
$(document).contextmenu(function(ev){//弹出右键菜单事件
$("ul").css("display","block");
$("ul").css("left",ev.pageX);      //让ul的left和top为鼠标的坐标,才能跟着鼠标动
$("ul").css("top",ev.pageY);
return false; //如果上面的成立,则阻止右键弹出菜单(即阻止系统默认事件)
});
</script>
</head>
<body>
<ul>
<li>登录</li>
<li>注册</li>
<li>提交</li>
<li>留言</li>
</ul>
</body>
</html>

posted @ 2016-10-26 23:04  2350305682  阅读(116)  评论(0编辑  收藏  举报