có cách nào để biết nếu sự kiện chuột đã rời khỏi một phần cụ thể của phần tử không? Ý tôi là, tôi có DIV với sự kiện mouseover/mouseenter và tôi muốn kích hoạt hành động chỉ khi con chuột rời khỏi bên trái bên của DIV và bên phải, nhưng nếu nó rời khỏi dưới cùng hoặc trên cùng, nó sẽ không kích hoạt bất kỳ hành động nào.Làm thế nào để các sự kiện mouseout/leave khác nhau bên cạnh nhau trên jquery?
Cảm ơn bạn trước.
Với jQuery bạn có thể sử dụng thuộc tính của sự kiện OffsetX như vậy:
$('#element').mouseout(function(e) {
if (e.offsetX < 0 || e.offsetX > $(this).width()) {
alert('out the side!');
}
});
Tôi không nghĩ rằng bất động sản là đáng tin cậy qua trình duyệt (w/o jQuery) và tôi tin jQuery bình thường hóa nó (Tôi đã thử nghiệm nó trong Chrome & IE7-9). Về cơ bản, thuộc tính chứa vị trí con trỏ liên quan đến phần tử đích vào thời điểm sự kiện được kích hoạt. Nếu giá trị nhỏ hơn 0 hoặc lớn hơn chiều rộng của phần tử, bạn biết con trỏ ở bên trái hoặc bên phải của phần tử tại thời điểm nó để lại các giới hạn của phần tử.
Bạn có thể kiểm tra pageX và pageY thuộc tính của event object và so sánh chúng với các kích thước của nguyên tố này trong câu hỏi (ví dụ: từ offset và thêm vào outerWidth/outerHeight nếu thích hợp).
Không dễ dàng, AFAIK, nhưng có thể thực hiện được.
Khi di chuột ra, bạn so sánh vị trí chuột với vị trí phần tử.
Xem chuột vị trí hướng dẫn cho jQuery: http://docs.jquery.com/Tutorials:Mouse_Position
(nó sử dụng MouseMove trong hướng dẫn, nhưng nó cũng làm việc cho mouseenter/MouseLeave)
Có lẽ bạn có thể sử dụng chức năng mouseout jquery (hoặc MouseLeave?) và thêm một trình xử lý tùy chỉnh với javascript để có được tọa độ của phần tử, chiều cao và chiều rộng và theo dõi nếu các tọa độ chuột vượt quá ranh giới của bạn.
tức là sự kiện di chuột của bạn kích hoạt, trình xử lý định vị phần tử tại (x, y) -> (10, 10), chiều cao là 20 và chiều rộng là 20. Nếu các tọa độ chuột lớn hơn hơn 30 trên X và giữa 10 và 30 trên Y, con chuột đã để lại ở phía bên tay phải.
Tôi nhận ra đây là một câu hỏi cũ, nhưng tôi đang tìm kiếm một cái gì đó tương tự để sử dụng cho các hiệu ứng di chuột. Tôi đã tìm thấy jquery.hoverdir
Có thể tiện dụng ...