当前位置：首页 > jquery

jquery鼠标事件

2026-03-02 16:46:42jquery

jQuery 鼠标事件基础

jQuery 提供了一系列鼠标事件处理方法，用于响应用户与页面的交互操作。这些事件可以绑定到任何 DOM 元素上。

常用鼠标事件

click(): 鼠标点击（按下并释放）
dblclick(): 双击事件
mouseenter(): 鼠标进入元素区域
mouseleave(): 鼠标离开元素区域
mousedown(): 鼠标按钮被按下
mouseup(): 鼠标按钮被释放
mousemove(): 鼠标在元素内移动
hover(): 结合了 mouseenter 和 mouseleave

事件绑定方法

直接绑定

$("#element").click(function() {
    // 点击事件处理逻辑
});

on() 方法绑定

jquery鼠标事件

$("#element").on("mouseenter", function() {
    // 鼠标进入处理逻辑
});

事件对象属性

事件处理函数可以接收事件对象参数，包含有用信息：

$("#element").mousemove(function(event) {
    console.log("X坐标: " + event.pageX);
    console.log("Y坐标: " + event.pageY);
    console.log("触发元素: " + event.target.id);
});

事件委托

对于动态添加的元素，使用事件委托：

$("#container").on("click", ".dynamic-item", function() {
    // 处理动态元素的点击
});

鼠标悬停效果示例

实现悬停时显示/隐藏效果：

jquery鼠标事件

$(".item").hover(
    function() {
        $(this).find(".tooltip").show();
    },
    function() {
        $(this).find(".tooltip").hide();
    }
);

禁用右键菜单

阻止默认右键菜单：

$(document).on("contextmenu", function(e) {
    e.preventDefault();
    alert("右键菜单已禁用");
});

拖拽功能基础实现

简单元素拖拽示例：

$("#draggable").on("mousedown", function(e) {
    var $this = $(this);
    var startX = e.pageX - $this.offset().left;
    var startY = e.pageY - $this.offset().top;

    $(document).on("mousemove.drag", function(e) {
        $this.css({
            left: e.pageX - startX,
            top: e.pageY - startY
        });
    });

    $(document).on("mouseup", function() {
        $(document).off("mousemove.drag");
    });
});