jquery点击

jQuery 点击事件基础

使用 jQuery 绑定点击事件主要通过 .click() 方法或 .on() 方法实现。以下是两种常用方式：

绑定点击事件

// 方法1: .click() 快捷方式
$("#elementId").click(function() {
    console.log("元素被点击");
});

// 方法2: .on() 通用事件绑定
$("#elementId").on("click", function() {
    console.log("通过.on绑定点击事件");
});

动态元素事件委托 对于动态生成的元素，需使用事件委托：

$(document).on("click", ".dynamic-element", function() {
    console.log("动态元素点击生效");
});

事件对象的使用

点击事件回调函数可接收 event 对象：

$("#btn").click(function(event) {
    event.preventDefault(); // 阻止默认行为
    console.log("点击坐标:", event.pageX, event.pageY);
});

常见应用场景

切换类名

$(".toggle-btn").click(function() {
    $(this).toggleClass("active");
});

表单提交拦截

$("#submit-btn").click(function(e) {
    if(!validateForm()) {
        e.preventDefault();
        alert("请填写完整信息");
    }
});

AJAX 触发

$("#load-data").click(function() {
    $.get("/api/data", function(response) {
        $("#content").html(response);
    });
});

注意事项

• 事件委托比直接绑定更节省内存，适合动态内容
• 使用 return false 会同时执行 preventDefault() 和 stopPropagation()
• jQuery 3.0+ 推荐使用 .on() 替代 .click() 以获得更好性能