jquery鼠标移出
jQuery 鼠标移出事件处理
jQuery 提供了 .mouseout() 和 .mouseleave() 方法来处理鼠标移出事件。两者区别在于事件冒泡机制：
.mouseout()
当鼠标离开选定元素或其子元素时触发，支持事件冒泡（可能触发多次）。
.mouseleave()
仅当鼠标离开选定元素本身时触发，不监听子元素且不冒泡（推荐大多数场景）。
基础语法
// mouseout 示例
$("#target").mouseout(function() {
console.log("鼠标移出元素或子元素");
});
// mouseleave 示例
$("#target").mouseleave(function() {
console.log("鼠标完全离开元素");
});动态元素绑定
对于动态生成的元素，需使用事件委托：
$(document).on("mouseleave", ".dynamic-element", function() {
alert("动态元素触发移出");
});结合 CSS 过渡效果
可通过添加/移除类实现视觉反馈：
$(".box").mouseleave(function() {
$(this).removeClass("hover-effect");
});对应 CSS：
.box { transition: all 0.3s; }
.hover-effect { background: #f0f0f0; }事件对象使用
获取移出时的坐标信息：
$("#log").mouseleave(function(e) {
console.log(`X: ${e.pageX}, Y: ${e.pageY}`);
});注意事项
- 移动端需额外处理
touchstart事件 - 高频触发场景建议使用防抖（debounce）优化性能
- 可通过
event.relatedTarget判断鼠标移动目标
