jquery鼠标

jQuery 鼠标事件处理

jQuery 提供了丰富的鼠标事件处理方法，可以方便地响应用户的鼠标操作。以下是常见的鼠标事件及其用法：

鼠标点击事件

• click(): 鼠标单击时触发
• dblclick(): 鼠标双击时触发

$("#element").click(function(){
  // 单击事件处理代码
});

$("#element").dblclick(function(){
  // 双击事件处理代码
});

鼠标移动事件

• mouseenter(): 鼠标进入元素时触发
• mouseleave(): 鼠标离开元素时触发
• hover(): 结合了mouseenter和mouseleave

$("#element").hover(
  function(){
    // 鼠标进入时执行
  },
  function(){
    // 鼠标离开时执行
  }
);

鼠标按下/释放事件

• mousedown(): 鼠标按钮按下时触发
• mouseup(): 鼠标按钮释放时触发

$("#element").mousedown(function(){
  // 鼠标按下处理
});

$("#element").mouseup(function(){
  // 鼠标释放处理
});

鼠标位置获取 可以通过事件对象获取鼠标位置信息：

$("#element").mousemove(function(event){
  var x = event.pageX;  // 相对于文档的X坐标
  var y = event.pageY;  // 相对于文档的Y坐标
  var relX = event.clientX;  // 相对于视口的X坐标
  var relY = event.clientY;  // 相对于视口的Y坐标
});

鼠标事件委托

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

$(document).on("click", ".dynamic-element", function(){
  // 处理动态元素的点击事件
});

鼠标事件的高级用法

阻止事件冒泡

$("#element").click(function(event){
  event.stopPropagation();
});

阻止默认行为

$("a").click(function(event){
  event.preventDefault();
});

鼠标滚轮事件

$("#element").on("wheel", function(event){
  var delta = event.originalEvent.deltaY;
  // delta > 0 表示向下滚动
  // delta < 0 表示向上滚动
});

鼠标特效示例

跟随鼠标移动的元素

$(document).mousemove(function(event){
  $("#follower").css({
    left: event.pageX + 10,
    top: event.pageY + 10
  });
});

鼠标悬停放大效果

$(".zoomable").hover(
  function(){ $(this).css("transform", "scale(1.2)"); },
  function(){ $(this).css("transform", "scale(1)"); }
);

这些方法可以组合使用，创建丰富的鼠标交互效果。jQuery的鼠标事件API设计简洁，能有效提升开发效率。