jQuery mousedown()事件：鼠标按下的瞬间-代码号

前面讲的 click 事件其实是由两个动作组成的：按下鼠标按钮和松开鼠标按钮。jQuery 提供了更细粒度的事件方法来分别捕获这两个动作——mousedown() 和 mouseup()。mousedown() 专门在鼠标左键按下的瞬间触发，不需要等松开。

和 click 相比，mousedown 的触发时机更早。在一些需要即时反馈的场景里——比如按住按钮持续放大图片、拖拽操作的起始点、或者长按删除功能——mousedown 是更合适的选择。

语法形式

触发 mousedown 事件：

$(selector).mousedown()

程序化地触发 mousedown 事件。

绑定 mousedown 事件：

$(selector).mousedown(function(event){
    // 鼠标按下时执行的代码
})

给选中元素绑定鼠标按下事件。event 参数可以获取按下的鼠标按钮信息（event.which，左键为 1）。

基础示例：按下标题时显示提示

下面这个例子用 mousedown() 监听标题。在标题上按下鼠标左键时，下方显示提示文字，2 秒后渐隐。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>mousedown() 基础示例</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").mousedown(function(){
                $("div").text("检测到鼠标按下事件").show().fadeOut(2000);
            });
        });
    </script>
</body>
</html>

在标题上按下鼠标，提示立刻出现。注意不需要松开鼠标，按下的瞬间事件就触发了。这和 click 必须等松开后才触发有明显区别。如果你只是想感知“用户点了这个东西”而且不在意松手的时机，用 click 就好；但如果你需要在按下的瞬间就开始做某些事——比如视觉上的按压反馈——mousedown 就更合适。

进阶示例：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:12px;cursor:pointer;font-weight:bold;user-select:none;">在这个段落上按下和松开鼠标左键</p>

    <script>
        $(document).ready(function(){
            $("p").mousedown(function(){
                $("p").css("background-color", "#2980b9");
            });
            $("p").mouseup(function(){
                $("p").css("background-color", "#fef9e7");
            });
        });
    </script>
</body>
</html>

在段落上按住鼠标左键，背景变蓝；松开鼠标，背景变淡黄。这个交互模式在按钮的按压态反馈、自定义滚动条拖拽、游戏操控等方面非常常见。user-select:none 是为了防止快速点击时浏览器选中文字，保持交互体验的干净。

mousedown 和 click 的区别

这个区别在开发中很关键：

事件	触发时机	适用场景
`mousedown`	按下鼠标按钮的瞬间	拖拽起始、长按、即时反馈
`mouseup`	松开鼠标按钮的瞬间	拖拽结束、按压恢复
`click`	按下并松开后才触发	常规点击、按钮提交

click 是一次完整的“按下+松开”动作，而 mousedown 只是“按下”这一个动作。如果在 mousedown 里调用了 event.preventDefault()，某些浏览器中甚至会阻止后续的 click 事件触发。

mousedown 的实际应用场景

除了简单的样式切换，mousedown 在项目中有几个典型的用途：

自定义拖拽： mousedown 记录起始位置，mousemove 更新位置，mouseup 结束拖拽。这是实现拖拽排序、滑块拖动、画布绘图等功能的经典三件套。

长按操作： mousedown 时启动定时器，mouseup 时清除。如果定时器在设定时间内没有被清除，就认为是长按操作，触发对应的功能（比如弹出删除确认）。

按压态反馈： 自定义按钮或控件在 mousedown 时添加按压样式（如阴影变深、轻微位移），mouseup 时恢复，比纯 CSS 的 :active 能做更灵活的控制。

本节课程知识要点

mousedown() 在鼠标左键按下的瞬间触发，早于 click 事件。
通常与 mouseup() 成对使用，构成完整的按压-松开交互闭环。
mousedown → mouseup → click 是鼠标点击的完整事件触发顺序。
适合拖拽起始、长按检测、按压反馈等需要即时响应按下动作的场景。
通过 event.which 可判断按下的是哪个鼠标按钮（左键=1，中键=2，右键=3）。

mousedown() 把鼠标点击动作拆分得更细，让开发者可以在“按下”这个最早就触发的时间点做文章。配合 mouseup() 使用，能覆盖从拖拽到长按到按压反馈等多种交互需求。理解它和 click 的时序关系很重要——大部分场景 click 够用，需要更精细控制按下时机时才用 mousedown，选对了方法交互逻辑会更精准。鼠标事件的体系还在继续，下一篇讲 mouseup()。

本文标签：

jQuery mousedown()事件：鼠标按下的瞬间