<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>自定义右键菜单</title>
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.11.3.js"></script>
<!-- 2. 引入jQuery UI的JS文件 -->
<script src="jquery-ui.js"></script>
<!-- 3. 引入jQuery UI的CSS文件 -->
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<ul style="width:100px;display:none;position:absolute;" id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
<script>
// 1. 如何禁用默认鼠标右键菜单
$(document).contextmenu(function(){
return false;
});
// 2. 绑定鼠标右键的事件
$(document).mousedown(function(event){
//当点击鼠标右键,显示菜单
if(event.button == 2){
// 显示自定义菜单
$("#menu").css({
//定义菜单显示位置为事件发生的X坐标和Y坐标
top : event.pageY,
left : event.pageX
}).slideDown(100);
//如果点击鼠标左键,隐藏菜单
}else if(event.button == 0){
$("#menu").slideUp(100);
}
});
$( "#menu" ).menu();
</script>
</body>
</html>
jQuery 自定义鼠标右键菜单
最新推荐文章于 2021-06-17 11:42:45 发布