JavaScript mousemove事件

当指针在网页标签内或元素周围移动时，mousemove事件会起作用。只需要使用鼠标的指针即可操作鼠标移动。mousemove事件参与事件处理程序。它是在脚本标签中执行的，用于响应特定的鼠标操作或移动。

每当指针在页面的指定部分移动时，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
Edge
Firefox
Opera
Safari
IE

示例

使用不同的方法、函数和事件，鼠标移动事件可以与JavaScript标签一起使用。我们可以在HTML标签上应用任何与鼠标移动有关的功能。我们可以将鼠标事件与对象、窗口和方法一起使用。

示例1： 使用HTML标签和JavaScript函数进行基本的鼠标移动事件。在这里，我们可以使用mousemove函数在div标签上与处理程序名称一起使用。处理程序名称在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>

输出

以下输出显示了鼠标移动事件函数之后的网页。

JavaScript 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>

输出

下面的输出显示了鼠标移动事件函数之后的网页。

JavaScript 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>

输出

以下输出显示了鼠标移动事件函数之后的网页。

JavaScript mousemove事件