首页 > 代码库 > 自定义右键菜单

自定义右键菜单

2024-08-17 21:29:16   220人阅读

<!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="http://www.mamicode.com/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>

自定义右键菜单


联系
我们