jquery鼠标移出

jQuery 鼠标移出事件

jQuery 提供了 mouseout 和 mouseleave 事件来处理鼠标移出元素的行为。两者在冒泡行为上有区别。

mouseout 事件

mouseout 事件在鼠标离开选定元素或其子元素时触发。由于事件冒泡，父元素也会收到通知。

$("#target").mouseout(function() {
    console.log("鼠标移出目标元素或子元素");
});

mouseleave 事件

mouseleave 事件仅在鼠标离开选定元素时触发，不会因为子元素触发冒泡。更适用于需要精确控制的情况。

$("#target").mouseleave(function() {
    console.log("鼠标完全离开目标元素");
});

事件绑定与解绑

使用 on() 方法绑定事件，off() 方法解绑事件。

// 绑定事件
$("#target").on("mouseleave", handler);

// 解绑事件
$("#target").off("mouseleave");

实际应用示例

结合 CSS 实现悬停效果：

$(".item").mouseenter(function() {
    $(this).css("background-color", "#f0f0f0");
}).mouseleave(function() {
    $(this).css("background-color", "");
});

注意事项

• mouseout 会因子元素触发多次，可能导致性能问题。
• 对于需要精确控制的场景，优先使用 mouseleave。
• 移动设备没有鼠标事件，需额外处理触摸事件。