jQuery mousemove() 方法

jQuery 事件

mousemove()方法触发mousemove事件,或附加一个函数以在发生mousemove事件时运行。

当鼠标指针移到所选元素上时,将发生mousemove事件。

您可能会认为mousemove,mouseentermouseover事件是相同的,但它们不是:

  • mouseenter-仅在鼠标指针进入元素时调用

  • mousemove-当鼠标指针移到元素上时调用

  • mouseover-当鼠标指针进入元素及其子元素时调用(请参见下面的示例)

语法:

触发选定元素的mousemove事件:

$(selector).mousemove()

将函数附加到mousemove事件:

$(selector).mousemove(function)

示例

当mousemove事件触发时显示随机数:

$("div").mousemove(function(){
  $(this).text(Math.random());
});
测试看看‹/›

获取鼠标指针在页面中的位置:

$(document).mousemove(function(event){ 
  $("#output").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
});
测试看看‹/›

当mousemove事件触发时更改背景颜色:

$("div").mousemove(function(){
  $(this).css("background", randColor());
});

// 生成随机颜色函数
function randColor() {
  return 'rgb(' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + 
  ',' + Math.floor(Math.random()*256) + ')';
}
测试看看‹/›

此示例演示mousemove,mouseenter和mouseover之间的区别:

调用的Mouseenter事件:

调用的mousemove事件:

调用的鼠标悬停事件:

运行代码

参数值

参数描述
function每次mousemove事件触发时执行的函数

jQuery 事件