Sự kiện onmouseleave

Sự kiện DOM MouseEvent

Định nghĩa và cách sử dụng

Khi con trỏ chuột rời khỏi phần tử, sự kiện onmouseleave xảy ra.

Lưu ý:Sự kiện này thường được sử dụng với Sự kiện onmouseentersử dụng cùng nhau, sự kiện này sẽ xảy ra khi con trỏ chuột di chuyển vào phần tử.

Lưu ý: Sự kiện onmouseleave tương tự như Sự kiện onmouseout。Sự khác biệt duy nhất là sự kiện onmouseleave không bubbling (không truyền lên cấu trúc cấp cao hơn của tài liệu). Xem thêm các ví dụ khác ở cuối trang.

Mô hình

Ví dụ 1

Chạy JavaScript khi con trỏ chuột di chuyển ra khỏi hình ảnh:

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">

Thử ngay

Ví dụ 2

Ví dụ minh họa sự khác biệt giữa các sự kiện onmousemove, onmouseleave và onmouseout:

<div onmousemove="myMoveFunction()">
  <p id="demo">Tôi sẽ minh họa trên onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
  <p id="demo2">Tôi sẽ minh họa trên onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
  <p id="demo3">Tôi sẽ minh họa trên onmouseout!</p>
</div>

Thử ngay

Cú pháp

Trong HTML:

<element onmouseleave="myScript">

Thử ngay

Trong JavaScript:

object.onmouseleave = function(){myScript};

Thử ngay

Trong JavaScript, sử dụng phương thức addEventListener():

object.addEventListener("mouseleave", myScript);

Thử ngay

Chú ý:Internet Explorer 8 hoặc sớm hơn không hỗ trợ Phương thức addEventListener()。

Chi tiết kỹ thuật

Bubbling: Không hỗ trợ
Có thể hủy bỏ: Không hỗ trợ
Loại sự kiện: MouseEvent
Các thẻ HTML được hỗ trợ: Tất cả các phần tử HTML, trừ: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> và <title>
Phiên bản DOM: Sự kiện cấp 2

Trình duyệt hỗ trợ

Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ sự kiện này hoàn toàn.}

Sự kiện Chrome IE Firefox Safari Opera
onmouseleave 30.0 5.5 Hỗ trợ 6.1 11.5
Sự kiện DOM MouseEvent