Với toạ độ x, y, tôi cần phải tìm tất cả các phần tử html bên dưới nó

Question

Tôi đang xây dựng một ứng dụng mà tôi liên tục cần phải lấy danh sách các phần tử html đang ngồi dưới một vị trí cụ thể (x, y so với khung nhìn, vd) . Tôi đang xem xét các cách tiếp cận sau đây, nhưng không có cách nào thỏa mãn:

(1) Đi qua html, tạo cấu trúc dữ liệu theo dõi vị trí x, y của mọi phần tử (x, y -> tập hợp các phần tử), và sau đó truy cập cấu trúc dữ liệu này khi tôi cần tìm kiếm. Thật không may, phương pháp này là một chút cồng kềnh và tôi đang tìm kiếm một cách tốt hơn để giải quyết vấn đề này. Thêm vào đó, tôi sợ nó có thể là quá chậm. Một phương pháp tốt hơn tôi đang xem xét là tạm thời thêm một trình xử lý sự kiện cấp cao nhất để nắm bắt tất cả các sự kiện di chuột, giả mạo chuột di chuột tại vị trí cụ thể và sau đó xóa trình xử lý, nhưng trông như thế này sẽ chỉ trả lại phần tử cao nhất (ví dụ, nếu có một số div vị trí tuyệt đối trên một vị trí cụ thể, tôi nghĩ nó sẽ chỉ trả về giá trị z cao nhất, trong khi tôi cần tất cả, mặc dù Tôi không chắc).

(3) Đối với IE, có componentFromPoint (x, y), nhưng tôi không thể tìm thấy tương đương trong trình duyệt khác - và nó chỉ trả về phần tử cao nhất.

Lưu ý rằng ứng dụng được xây dựng dưới dạng bookmarklet và tôi không có quyền kiểm soát đối với html cơ bản - điều này không may làm giảm bất kỳ giải pháp phía máy chủ dễ dàng nào.

Tôi sẵn sàng sử dụng thư viện (hiện có trên jquery).

FYI, cho đến thời điểm tốt nhất tôi tìm thấy ở đây là Getting DIV id based on x & y position; tự hỏi liệu có điều gì đó cập nhật hơn không.

Answer 1

Bạn có thể đang tìm kiếm phương thức elementFromPoint tồn tại trong MSIE, FF3 + và ở một số dạng trong Safari và Opera. Nó cũng có giá trị khi xem getBoundingClientRect. Kết hợp cả hai và bạn nên kinh doanh.

Bạn cũng có thể tăng tốc phương pháp # 1 bằng cách giữ cấu trúc được tính toán giữa tra cứu và chỉ tính toán lại khi các thay đổi thực sự xảy ra trên trang. Hãy xem làm thế nào công cụ chọn (Sizzle trong paticular) bộ nhớ cache của họ tra cứu và hết hạn bộ nhớ cache khi DOM thay đổi.

Dường như vị trí của mọi phần tử là điều mà các trình xử lý kéo và thả đã thực hiện cho đến bây giờ. Có một chục miễn phí những người ra có mà công cụ này đúng cách tối ưu hóa (linh cảm của tôi là của YUI sẽ có mã dễ đọc nhất). Đây có thể là ngày mặc dù hoặc đang cố gắng hỗ trợ các trình duyệt mà bạn không muốn/cần.