当前位置：首页 > jquery

jquery点击事件

2026-01-13 17:38:23jquery

jQuery 点击事件基础用法

使用 jQuery 绑定点击事件主要通过 .click() 方法或 .on() 方法实现。以下示例展示如何为按钮添加点击事件：

// 方法1: 使用 .click()
$("#myButton").click(function() {
    alert("按钮被点击了");
});

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

动态元素事件委托

对于动态生成的元素，需使用事件委托。通过将事件绑定到父元素（需为静态元素）并指定目标子元素选择器：

$("#staticParent").on("click", ".dynamicChild", function() {
    $(this).toggleClass("active");
});

阻止默认行为和事件冒泡

在事件处理函数中可阻止默认行为或冒泡：

jquery点击事件

$("a.prevent-link").on("click", function(e) {
    e.preventDefault(); // 阻止链接跳转
    e.stopPropagation(); // 阻止事件冒泡
    console.log("链接点击被拦截");
});

一次性事件绑定

使用 .one() 方法让事件只触发一次：

$("#onceButton").one("click", function() {
    alert("此提示仅出现一次");
});

多事件绑定

单个事件处理函数可响应多个事件类型：

jquery点击事件

$("#multiTrigger").on("click mouseenter", function() {
    $(this).css("background-color", "yellow");
});

事件对象属性

事件处理函数可接收事件对象参数，获取相关信息：

$(".clickable").click(function(e) {
    console.log("坐标:", e.pageX, e.pageY);
    console.log("触发元素:", e.target.tagName);
});

解除事件绑定

使用 .off() 移除事件监听：

// 移除所有点击事件
$("#removeBtn").off("click");

// 移除特定处理函数
function handler() { /*...*/ }
$("#removeBtn").on("click", handler);
$("#removeBtn").off("click", handler);