本文共 1784 字，大约阅读时间需要 5 分钟。

jQuery 鼠标事件是用来处理用户在移动鼠标光标或点击鼠标键时触发的各种交互操作。这些事件对于实现丰富的用户交互功能具有重要作用。本节将详细介绍jQuery 中常用的鼠标事件及其使用方法。

1. click 事件

click 事件用于检测用户点击鼠标左键时的触发动作。这个事件是最常用的鼠标事件之一，适用于执行简单的点击操作。

示例：

$('p').click(function() {
    alert('click function is running !');
});

2. dblclick 事件

dblclick 事件用于检测用户快速连续两次点击鼠标左键时的触发动作。常见于双击操作，如打开新标签或切换视图。

示例：

$("button").dblclick(function() {
    $("p").slideToggle();
});

3. mousedown 事件

mousedown 事件用于检测用户按下鼠标左键时的触发动作，通常用于开始某种交互操作。

示例：

$("button").mousedown(function() {
    $("p").slideToggle();
});

4. mouseup 事件

mouseup 事件用于检测用户松开鼠标左键时的触发动作，通常用于结束某种交互操作。

示例：

$("button").mouseup(function() {
    $("p").slideToggle();
});

5. mouseover 事件

mouseover 事件用于检测鼠标光标进入元素时的触发动作，常用于显示上下文菜单或高亮元素。

mouse-out事件用于检测鼠标光标离开元素时的触发动作，通常用于移除高亮效果或关闭上下文菜单。

示例：

$("p").mouseover(function() {
    $("p").css("background-color", "yellow");
}).mouseout(function() {
    $("p").css("background-color", "#E9E9E4");
});

6. mouseenter 事件

mouseenter 事件用于检测鼠标光标进入元素时的触发动作，常用于显示悬停提示或切换视图。

mouseleave 事件用于检测鼠标光标离开元素时的触发动作，通常用于隐藏悬停提示或切换视图。

示例：

$("p").mouseenter(function() {
    $("p").css("background-color", "yellow");
}).mouseleave(function() {
    $("p").css("background-color", "#E9E9E4");
});

7. hover 事件

hover 事件用于检测鼠标光标悬停在元素上或移出元素时的触发动作，适用于显示悬停效果或切换视图。

示例：

$(".table_list tr").hover(
    function() {
        $(this).addClass("hover");
    },
    function() {
        $(this).removeClass("hover");
    }
);

8. toggle 事件

toggle 事件用于检测鼠标点击切换元素的状态，如开关显示或隐藏内容。该事件可以接受多个回调函数，分别对应不同的状态切换。

示例：

$("p").toggle(
    function() {
        $("body").css("background-color", "green");
    },
    function() {
        $("body").css("background-color", "red");
    },
    function() {
        $("body").css("background-color", "yellow");
    }
);

通过以上事件，开发者可以根据用户的交互行为，实现丰富的动态网页功能。每种事件都有特定的应用场景，选择合适的事件类型可以提升用户体验。

转载地址：http://jhqfk.baihongyu.com/