Sự kiện onmouseleave trong JavaScript

• Trần Thị Vân
• 1144
• 28/08/2025

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

Sự kiện onmouseleave trong JavaScript hoạt động như onmouseout dùng để tạo sự kiện sau khi người dùng bỏ rê chuột khỏi thẻ HTML.

Code Sự kiện onmouseleave trong JavaScript

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

onmouseleave="doiMau()"

<div id="kvuong" onmouseleave="doiMau()">Rê vào, rê ra</div>
<script>
function doiMau(){
var kvuong = document.getElementById('kvuong');
kvuong.style.background = 'green';
}
</script>

Chạy Thử

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

kvuong.onmouseleave = function(){
  kvuong.style.background = 'green';
};

<div id="kvuong" >Rê vào, Rê ra</div>
<div id="kvuong2" >Rê vào, Rê ra</div>
<script>
var kvuong = document.getElementById('kvuong');
kvuong.onmouseleave = function(){
kvuong.style.background = 'green';
};

var kvuong2 = document.getElementById('kvuong2');
kvuong2.addEventListener('mouseleave', function(){
kvuong2.style.background = 'green';
});
</script>

Chạy Thử

Onmouseleave khác gì với các sự kiện chuột khác?

Khi xử lý thao tác di chuyển chuột, onmouseleave thường được đặt cạnh onmouseout vì cả hai đều có thể được kích hoạt khi con trỏ rời khỏi một phần tử. Tuy nhiên, cách chúng phản ứng với phần tử con không giống nhau. Hiểu rõ điểm khác biệt này sẽ giúp tránh việc một đoạn JavaScript chạy nhiều lần ngoài dự kiến.

Phân biệt onmouseleave và onmouseout

onmouseleave chỉ được kích hoạt khi con trỏ chuột thực sự rời khỏi phạm vi của phần tử đang theo dõi. Việc di chuyển chuột giữa phần tử cha và các phần tử con bên trong không làm sự kiện này chạy lại.

Trong khi đó, onmouseout có thể được kích hoạt khi con trỏ rời khỏi một phần tử để đi vào phần tử con. Vì vậy, nếu một vùng giao diện chứa nhiều phần tử nhỏ, onmouseout có thể tạo ra nhiều lần xử lý hơn bạn mong muốn.

Ví dụ, một vùng chứa có nút bên trong:

<div id="box">
  <button>Di chuyển chuột vào đây</button>
</div>

Nếu sử dụng onmouseout cho box, việc di chuyển chuột từ vùng cha vào nút có thể làm sự kiện được kích hoạt. Với onmouseleave, sự kiện chỉ quan tâm đến thời điểm con trỏ rời khỏi toàn bộ vùng của box.

Vì vậy, có thể ghi nhớ đơn giản: onmouseout nhạy với sự thay đổi giữa phần tử và các phần tử con, còn onmouseleave phù hợp khi muốn xác định lúc chuột rời khỏi toàn bộ khu vực.

Khi nào nên dùng onmouseleave thay vì mouseout?

Nên ưu tiên onmouseleave khi một hành động chỉ cần thực hiện sau khi người dùng đưa chuột ra khỏi toàn bộ vùng tương tác. Cách này đặc biệt phù hợp với menu, hộp thông tin, thẻ sản phẩm hoặc các khu vực có nhiều phần tử con.

Chẳng hạn, một hộp sản phẩm có ảnh, tiêu đề và nút bên trong. Nếu hiệu ứng được thiết kế để kết thúc khi người dùng rời khỏi cả hộp, onmouseleave sẽ dễ kiểm soát hơn.

const product = document.getElementById("product");

product.onmouseleave = function() {
  product.classList.remove("active");
};

Ngược lại, nếu cần phát hiện việc con trỏ rời khỏi từng phần tử cụ thể, mouseout có thể phù hợp hơn. Việc lựa chọn nên dựa vào phạm vi mà bạn muốn theo dõi thay vì chỉ dựa vào tên sự kiện.

Lưu ý khi áp dụng onmouseleave cho phần tử chứa phần tử con

Điểm quan trọng nhất là xác định đúng ranh giới của vùng cần theo dõi. Khi phần tử cha chứa nhiều thành phần bên trong, onmouseleave giúp tránh việc xử lý lại chỉ vì chuột di chuyển qua các thành phần con.

Tuy nhiên, nếu vùng chứa thay đổi kích thước, vị trí hoặc cấu trúc trong quá trình tương tác, bạn vẫn nên kiểm tra lại hành vi thực tế. Một số hiệu ứng CSS như thay đổi kích thước hoặc làm xuất hiện phần tử mới có thể khiến vùng tương tác thay đổi so với thiết kế ban đầu.

Đối với giao diện có nhiều lớp tương tác, nên gắn onmouseleave vào phần tử đại diện cho toàn bộ khu vực thay vì gắn riêng cho từng thành phần nhỏ. Cách này giúp mã JavaScript ngắn gọn hơn và hạn chế các lần xử lý không cần thiết.

Lời kết

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