jQuery click()事件：最常用的鼠标交互-代码号

在所有 jQuery 事件里，click() 可以说是使用频率较高的一个。不管是按钮点击、链接跳转、菜单展开、弹窗关闭，本质上都是对点击动作的响应。把 click() 事件的用法和细节吃透了，日常开发中的大部分交互需求都能应付。

click() 方法有两种用法：不传参数时是触发点击事件，传递回调函数时是绑定点击事件。项目开发中绑定的场景占绝大多数，手动触发用的相对少一些，但在写自动化测试或模拟用户操作时很有用。

语法形式

触发 click 事件：

$(selector).click()

这行代码会模拟用户点击选中的元素，页面上绑定的 click 回调会自动执行。不需要用户真的去点鼠标。

绑定 click 事件：

$(selector).click(function(){
    // 点击后执行的代码
})

这是更常见的写法，给选中元素绑定一个点击事件处理函数。用户每次点击该元素，回调函数就会执行一次。

基础示例：点击段落弹出提示

这个例子简单直观地演示了 click() 的绑定用法。页面上有一段文字，点击后弹出 alert 提示。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>click() 基础示例</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <p>点击这段文字试试看</p>

    <script>
        $(document).ready(function(){
            $("p").click(function(){
                alert("你点击了这段文字！");
            });
        });
    </script>
</body>
</html>

这个模式几乎是所有点击交互的起点：选中元素 → 绑定 click 事件 → 在回调里写业务逻辑。不管是做复杂的功能还是简单的反馈，骨架都是这个。

进阶示例：点击标题让它消失

下面的例子更实用一些。页面上有三个层级的标题 h1、h2、h3，点击任意一个标题，它就会隐藏。这里用了多选择器 $("h1,h2,h3") 一次性给三个标签都绑定了事件。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>click() 隐藏元素示例</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
    <h1>点击我，我会消失</h1>
    <h2>我也是，点一下就不见了</h2>
    <h3>我也一样会消失</h3>

    <script>
        $(document).ready(function(){
            $("h1,h2,h3").click(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>

这个例子里的一个关键点是 $(this) 的使用。三个标题都绑了同一个回调函数，但 $(this) 始终指向被点击的那个具体元素，所以只有被点的那个标题会隐藏，其他不受影响。很多初学者在这里容易写成 $("h1,h2,h3").hide()，结果一点击三个标题全消失了。区别就在于 $(this) 精准定位了事件目标，而选择器会重新匹配所有元素。

click 和 on('click') 该用哪个

jQuery 还提供了 on() 方法来绑定事件，写法是 $("p").on("click", function(){...})。两种写法在功能上等价，但 on() 的能力更强——它支持事件委托，可以给动态添加的元素绑定事件。

如果你确定元素在页面加载时就存在、之后不会被动态替换，用 click() 就很方便，代码也更短。但如果涉及动态生成的元素，建议直接用 on() 做事件委托。我的习惯是，项目中统一用 on() 来绑定事件，避免混用两种写法导致后期维护时搞不清楚哪些能处理动态元素、哪些不能。不过对于快速写个小 demo 或者学习验证的阶段，click() 的简洁性确实很友好。

手动触发 click 的实际用途

虽然绑定是主要用法，但手动触发 click() 在一些场景下也很实用。比如：

$("#submitBtn").click(); // 模拟点击提交按钮

这种写法在以下情况会用得上：

用户按了回车键，你想自动触发搜索按钮的点击逻辑
页面加载完成后自动触发某个默认选项的点击
写单元测试时模拟用户操作

手动触发时不需要传回调函数，调用 click() 本身就会让已绑定的处理函数执行。

本节课程知识要点

click() 有两种用法：不传参触发事件，传回调函数绑定事件，绑定是主要使用场景。
回调函数中的 $(this) 指向被点击的那个元素，不是选择器匹配到的全部元素，精准操作靠它。
多选择器写法如 $("h1,h2,h3") 可以一次给多种元素绑定相同的点击逻辑。
动态添加的元素无法通过 click() 直接绑定，需要用 on() 做事件委托。
手动触发 click() 在模拟用户操作和自动化测试中很实用。

click() 是 jQuery 事件体系里比较基础但也很常用的方法。它的用法简单直接，两个语法形式各有用处——绑定处理函数应对日常交互，手动触发用于模拟操作。掌握了 click() 的绑定模式、$(this) 的作用域、以及它与 on() 的适用边界，点击交互相关的代码就能写得既简洁又可靠。后面继续展开 dblclick、mouseenter、mouseleave 等其他鼠标事件，逐步把交互能力构建得更完整。

本文标签：

jQuery click()事件：最常用的鼠标交互