Sự kiện onmousemove trong JavaScript

• Trần Thị Vân
• 1064
• 26/08/2025

Chức năng của Sự kiện onmousemove trong JavaScript

Sự kiện onmousemove trong JavaScript dùng để lấy tọa độ X và tọa độ Y của con trỏ chuột mỗi khi di chuyển con chuột.

Code Sự kiện onmousemove trong JavaScript

Sự kiện onmousemove gán trực tiếp trong JavaScript

onmousemove="layToaDo(event)"

<div id="ktrai">
<div id="kvuong" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x"></span> - Tọa độ Y: <span id="y"></span></p>
</div>

<script>
function layToaDo(e){
  var x = e.clientX;
  var y = e.clientY;
  document.getElementById("x").innerHTML = x;
  document.getElementById("y").innerHTML = y;
}
</script>

Chạy Thử

Sự kiện onmousemove không gán trực tiếp trong JavaScript

 kvuong.onmousemove = function(e){
 document.getElementById("x").innerHTML = x;
 document.getElementById("y").innerHTML = y;
 };

<div id="ktrai">
<div id="kvuong" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x"></span> - Tọa độ Y: <span id="y"></span></p>
</div>

<div id="kphai">
<div id="kvuong2" onmousemove="layToaDo(event)">Di chuyển</div>
<p>Tọa độ X: <span id="x2"></span> - Tọa độ Y: <span id="y2"></span></p>
</div>

<script>
 var kvuong = document.getElementById('kvuong');
 kvuong.onmousemove = function(e){
 var x = e.clientX;
 var y = e.clientY;
 document.getElementById("x").innerHTML = x;
 document.getElementById("y").innerHTML = y;
 };
 
 var kvuong2 = document.getElementById('kvuong2');
 kvuong2.addEventListener('mousemove', function(e){
 var x = e.clientX;
 var y = e.clientY;
 document.getElementById("x2").innerHTML = x;
 document.getElementById("y2").innerHTML = y;
 }); 
</script>

Chạy Thử

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Sự kiện onmousemove trong JavaScript.