Sự kiện onmousemove trong JavaScript

• Trần Ngọc Thanh
• 29
• 26/08/2025

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, chi tiết như nào hãy cùng chúng tôi phân tích:

Sự kiện onmousemove trong JavaScript

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

<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

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