Sự khác biệt giữa mouseout của jQuery () và mouseleave () là gì?

Sự khác biệt giữa mouseout của jQuery () và mouseleave () là gì?

Sự kiện mouseleave khác với mouseout ở cách nó xử lý sự kiện sủi bọt. Nếu sử dụng mouseout trong ví dụ này, thì khi con trỏ chuột di chuyển ra khỏi phần tử Bên trong, trình xử lý sẽ được kích hoạt. Đây thường là hành vi không mong muốn. Mặt khác, sự kiện mouseleave chỉ kích hoạt trình xử lý của nó khi con chuột rời khỏi phần tử mà nó bị ràng buộc, không phải phần tử con. Vì vậy, trong ví dụ này, trình xử lý được kích hoạt khi con chuột rời khỏi phần tử Bên ngoài, nhưng không phải phần tử Bên trong.

Nguồn: http://api.jquery.com/mouseleave/

Có thể có những lúc mouseoutlà một sự lựa chọn tốt hơn mouseleave.

Ví dụ: giả sử bạn đã tạo chú giải công cụ mà bạn muốn hiển thị bên cạnh một phần tử trên đó mouseenter. Bạn sử dụng setTimeoutđể ngăn chú giải công cụ xuất hiện ngay lập tức. Bạn xóa thời gian chờ khi mouseleavesử dụng clearTimeoutđể nếu chuột rời khỏi chú giải công cụ sẽ không được hiển thị. Điều này sẽ hoạt động 99% thời gian.

Nhưng bây giờ giả sử phần tử mà bạn gắn chú giải công cụ là một nút có clicksự kiện và giả sử nút này nhắc người dùng bằng một confirmhoặc alerthộp. Người dùng nhấp vào nút và alertkích hoạt. Người dùng nhấn nó đủ nhanh để chú giải công cụ của bạn không có cơ hội bật lên (cho đến nay rất tốt).

Người dùng nhấn alertnút OK trong ô và chuột rời khỏi phần tử. Nhưng vì trang trình duyệt hiện đang ở trạng thái bị khóa, không javascript nào sẽ kích hoạt cho đến khi nút OK được nhấn, có nghĩa là mouseleavesự kiện của bạn SẼ KHÔNG CHÁY . Sau khi người dùng nhấn OK, chú giải công cụ sẽ bật lên (không phải như những gì bạn muốn).

Sử dụng mouseouttrong trường hợp này sẽ là giải pháp thích hợp vì nó sẽ cháy.

Tài liệu API jQuery:

mouseout

Loại sự kiện này có thể gây ra nhiều đau đầu do sự kiện sủi bọt. Ví dụ: khi con trỏ chuột di chuyển ra khỏi phần tử Bên trong trong ví dụ này, một sự kiện trỏ chuột sẽ được gửi đến phần tử đó, sau đó nhỏ giọt đến Bên ngoài. Điều này có thể kích hoạt trình xử lý mouseout bị ràng buộc vào những thời điểm không thích hợp. Xem thảo luận về .mouseleave () để biết một giải pháp thay thế hữu ích.

mouseleaveMột sự kiện tùy chỉnh cũng vậy , được thiết kế vì lý do trên.

http://api.jquery.com/mouseleave/

Sự kiện Mouseout sẽ kích hoạt khi chuột rời khỏi phần tử đã chọn và cũng như khi chuột rời khỏi phần tử con của nó.

Phần tử Event Mouseleave sẽ kích hoạt khi con trỏ chỉ rời khỏi phần tử đã chọn.

Tham khảo: W3School