JavaScript 中的 "mousemove" 事件

2025年3月18日 | 阅读 5 分钟

当指针在网页标签内或元素周围移动时，会触发 mousemove 事件。通过鼠标指针的位置，可以轻松地操作鼠标移动。mousemove 事件参与一个事件处理程序。它是在 script 标签中执行以响应特定鼠标操作或移动的。

每次指针在页面的必需部分移动时，都会执行 mousemove 事件并操作代码。mousemove 是重要的鼠标事件之一，与 mouseup、mouseout、click、mousedown 等事件一样，与 MouseEvent 接口协同工作。

语法

以下语法使用 "mousemove" 函数来显示鼠标移动事件。

<div id = "demoDIV" onmousemove = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>

以下语法使用 addEventListener 事件通过 "mousemove" 函数显示鼠标移动事件。

<script>
object.addEventListener("mousemove", function_name);
function_name(){
//write code here!!!
}
</script>

以下语法使用 javascript 对象和函数来实现 mousemove 事件。

<script>
Object.onmousemove = function_name;
function_name(){
//write code here!!!
}
</script>

支持的浏览器

鼠标移动事件函数在许多浏览器中均可工作。以下浏览器支持 "mousemove" 和 "onmousemove" 函数。

Chrome
边
火狐
Opera
Safari
IE

示例

mousemove 事件使用 JavaScript 标签通过不同的方法、函数和事件进行工作。我们可以将任何功能应用于 html 标签上的鼠标移动。我们可以将鼠标事件与对象、窗口和方法一起使用。

示例 1： 使用 html 标签和 JavaScript 函数的基本鼠标移动事件。在此，我们可以在 div 标签上使用带有处理程序名称的 mousemove 函数。处理程序名称在 JavaScript 标签中用于操作功能。

<!DOCTYPE html>
<html>
<head> 
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  colour: red;
}
</style>
</head>
<body>
<h3> How to use the mousemove event in javascript </h3>
<b> The mousemove event for div tag in javascript </b>
<p id = "datas" style="color:red !important;"> </p>
<p id = "demos" style="color:navy !important;"> </p>
<div id = "demoDIV" onmousemove = "demoDIVFunction(event)" onmouseout = "clearCoo()">
The javascript mousemove event with the Html tag uses with the mouse movement event on the web page. When we move the mouse or pointer with the event handler, operate the div tag of the html page.  
</div>
<script>
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using html tag activates successfully!!!";
document.getElementById("demoDIV").style.color = "white";
document.getElementById("demoDIV").style.backgroundColor = "grey";
document.getElementById("demoDIV").style.border = "2px dotted blue";
var x_id = element.clientX;
var y_id = element.clientY;
var coo = "Coordinates are: (" + x_id + "," + y_id + ")";
document.getElementById("demos").innerHTML = coo;
}
function clearCoo() {
document.getElementById("datas").innerHTML = "The mousemoveevent stop because of the pointer";
}
</script>
</body>
</html>

输出

以下输出显示了 mousemove 事件函数后显示的网页。

示例 2： 使用 html 标签和 JavaScript 函数的基本鼠标移动事件。在此，我们可以在 div 标签上使用带有处理程序名称的 mousemove 函数。处理程序名称在 JavaScript 标签中用于操作功能。

<!DOCTYPE html>
<html>
<head> 
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  colour: red;
}
</style>
</head>
<body>
<h3> The mouseup event for body tag in javascript </h3>
<p id = "datas" style = "color:red !important;"> </p>
<p id = "demos" style = "color:navy !important;"> </p>
<div id = "demoDIV" onmousemove = "demoDIVFunction(event)" onmouseout = "clearCoo()">
The javascript mouseup event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button, the event handler operates the body tag of the html page.  
</div>
<script>
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using html tag activates successfully!!!";
document.getElementById("demoDIV").style.color = "white";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoDIV").style.backgroundColor = color;
document.getElementById("demoDIV").style.border = "2px dotted blue";
var x_id = element.clientX;
var coo = "X-Coordinates are: (" + x_id + " is x-Cooridination. )";
document.getElementById("demos").innerHTML = coo;
}
function clearCoo() {
document.getElementById("datas").innerHTML = "The mousemoveevent stop because of the pointer";
}
</script>
</body>
</html>

输出

以下输出显示了 mousemove 事件函数后显示的网页。

示例 3： 使用 html 标签和 JavaScript 函数的鼠标移动事件。在此，我们可以在 body 标签上使用带有处理程序名称的 mousemove 函数。

<!DOCTYPE html>
<html>
<head> 
<title> How to use the mousemove event in javascript </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  colour: red;
}
</style>
</head>
<body id = "demoDIV1">
<h3> The mousemove event for body tag in javascript </h3>
<b> You can move the mouse anywhere on the web page.</b>
<p id = "datas" style = "color:red !important;"> </p>
<p id = "demos" style = "color:navy !important;"> </p>
<div id = "demoDIV">
The javascript mousemove event with the addEventListner event uses with the mouse movement event on the web page. When we release the pressed button, an event handler operates the body tag of the html page.  
</div>
<script>
//The onmousemove event works with the window
window.onmousemove = demoDIVFunction;
function demoDIVFunction(element) {
document.getElementById("datas").innerHTML = "JavaScript Mouse move function with object using windows function activates successfully!!!";
document.getElementById("demoDIV1").style.color = "white";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoDIV1").style.backgroundColor = color;
var x_id = element.clientX;
var coo = "X-Coordinates are: (" + x_id + " is x-Coordination. )";
document.getElementById("demos").innerHTML = coo;
}
function clearFunction() {
document.getElementById("datas").innerHTML = "The mousemove event stop because of the Pointer";
}
</script>
</body>
</html>

输出

以下输出显示了 mousemove 事件函数后显示的网页。

结论

当我们用鼠标在网页、html 标签或页面容器上移动时，mousemove 事件就会触发。我们可以在 Web 应用程序上使用鼠标事件来根据移动需求实现鼠标功能。对于用户和开发人员来说，使用笔记本电脑、台式机和其他鼠标应用程序都非常方便。

下一话题如何在 JavaScript 中创建动态表格

JavaScript 中的 "mousemove" 事件

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 中的 "mousemove" 事件

语法

支持的浏览器

示例

结论

相关帖子

JavaScript String startsWith

将数据插入 JavaScript indexedDB

如何打开 JSON 文件

Javascript 中的 oninput 函数

Javascript translate() 方法

如何使用 JavaScript 获取 PI 的值

JavaScript indexedDB

如何在 html 中调用 JavaScript 函数

如何使用 JavaScript 绘制一条线

WebSocket 是什么？

订阅 Tpoint Tech

联系信息

关注我们