上一篇讲了 mousedown()，它负责捕获鼠标按下的瞬间。现在来看它的搭档——mouseup()。当用户在元素上按下鼠标左键然后松开时，mouseup 事件在松开的那一刻触发。
mouseup() 和 mousedown() 是鼠标按压交互的一对搭档。完整的按压交互流程是：mousedown（按下）→ mouseup（松开）→ click（完整点击）。mouseup 处于这个链条的中间位置，常用于拖拽操作结束的标记、按压状态的恢复、或者自定义按钮的松开反馈。
语法形式
触发 mouseup 事件：
$(selector).mouseup()
程序化地触发 mouseup 事件。
绑定 mouseup 事件：
$(selector).mouseup(function(event){
// 鼠标松开时执行的代码
})
给选中元素绑定鼠标松开事件。
基础示例：松开鼠标时显示提示
下面这个例子用 mouseup() 监听标题元素。在标题上按住鼠标然后松开时，下方显示提示文字，2 秒后渐隐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseup() 基础示例</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<h1 id="mainHeading">在此标题上按下并松开鼠标左键</h1>
<div id="hintMsg" style="color:#1a5276;font-weight:bold;"></div>
<script>
$(document).ready(function(){
$("#mainHeading").mouseup(function(){
$("div").text("检测到鼠标松开事件").show().fadeOut(2000);
});
});
</script>
</body>
</html>
注意 mouseup 的触发条件：鼠标必须在元素上按下，然后在任意位置松开都会触发。如果鼠标在元素外按下再拖回元素内松开，同样会触发 mouseup。这跟 click 要求按下和松开都在同一个元素上不同，mouseup 的条件更宽松一些。
进阶示例：mousedown 和 mouseup 配合切换样式
下面这个例子把 mousedown() 和 mouseup() 配对使用。按下变粉色，松开变黄绿色，形成按压反馈。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mousedown 与 mouseup 样式切换示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<p style="padding:14px;cursor:pointer;font-weight:bold;user-select:none;">按下和松开鼠标左键观察颜色变化</p>
<script>
$(document).ready(function(){
$("p").mousedown(function(){
$("p").css("background-color", "#f5b7b1");
});
$("p").mouseup(function(){
$("p").css("background-color", "#a9dfbf");
});
});
</script>
</body>
</html>
按住鼠标左键不放，段落保持粉色背景；松开鼠标，背景切换为黄绿色。这个模式给自定义按钮、控件或游戏界面提供了更细腻的交互反馈。user-select:none 放在这里是防止反复快速点击时选中文字影响体验。
mouseup 在拖拽操作中的角色
mouseup 在拖拽操作中承担着“结束标志”的角色。标准拖拽流程由三个鼠标事件配合完成：
// 拖拽的基本骨架
$(".draggable").mousedown(function(e){
// 1. 按下时记录起始坐标，绑定 mousemove 跟踪移动
$(document).mousemove(function(e){
// 2. 移动时更新元素位置
});
});
$(document).mouseup(function(){
// 3. 松开时解除 mousemove 绑定，结束拖拽
$(document).off("mousemove");
});
这里有一个关键的细节：mousemove 和 mouseup 一般绑定在 document 上而不是拖拽元素上。原因是用户拖拽时鼠标可能会移出拖拽元素的范围，如果把 mouseup 绑在元素上，鼠标移出后松开就无法触发事件，拖拽状态就收不回来了。绑在 document 上能兜底全局，保证无论鼠标在哪松开都能正确处理。
本节课程知识要点
-
mouseup()在鼠标左键松开的瞬间触发，是鼠标按压交互中“松开”环节的事件方法。 -
与
mousedown()成对使用，构成完整的按压-松开交互闭环。 -
鼠标点击的完整事件触发顺序为：
mousedown→mouseup→click。 -
在拖拽操作中，
mouseup承担拖拽结束的标志角色，通常在document上绑定以兜底全局。 -
mouseup的触发条件比click宽松——只要元素参与了按下过程，松开时就会触发。
mouseup() 完成了鼠标按压交互闭环的“松开”环节。它和 mousedown() 配对，让开发者可以精细控制从按下到松开的完整交互过程。理解这两个事件和 click 之间的时序关系，能帮助在拖拽、自定义按钮按压态、游戏操控等场景下写出更精准的交互逻辑。到这里，鼠标事件的常用方法基本都覆盖到了，配合之前讲的键盘事件和表单事件，jQuery 事件体系已经形成了比较完整的能力矩阵。
