Vấn đề tôi đang cố giải quyết là "Có gì ở vị trí này?"Nhận id DIV dựa trên vị trí x & y
Nó khá tầm thường để có được vị trí x/y (offset) của DIV, nhưng ngược lại thì sao? Làm thế nào để tôi nhận được id của một DIV (hoặc bất kỳ phần tử nào) cho một vị trí x/y?
Sử dụng bộ chọn JQuery để lọc danh sách tất cả các DIV cho phù hợp với tiêu chí vị trí của bạn?
Bộ chọn JQuery khá hữu ích, nhưng (trừ khi tôi bỏ sót điều gì đó trong tài liệu), không có bộ chọn nào thực hiện việc này. Tôi không thể lọc dựa trên bất kỳ tiêu chí nào khác bởi vì tất cả những gì tôi phải làm việc là vị trí x và y.
Tạo trình xử lý sự kiện chuột, sau đó kích hoạt sự kiện chuột tại vị trí đó. Điều này sẽ cung cấp cho bạn toàn bộ ngăn xếp các phần tử tại vị trí đó.
Hoặc, xem mã nguồn của Firebug.
điều này có thể là một quá ít bộ xử lý nhưng đi qua toàn bộ danh sách các phần tử div trên một trang, tìm vị trí và kích thước của chúng rồi kiểm tra nếu chúng nằm dưới chuột. tôi không nghĩ rằng tôi muốn làm điều đó với một trình duyệt mặc dù.
Cảm ơn MattMitchell. Tôi ước điều đó thật đơn giản - tôi đã biết cách để có được vị thế của một DIV - điều này hơi phức tạp hơn một chút.
Nick và John - Thật không may, tôi không thể sử dụng vị trí chuột.
Tôi đang nghĩ rằng giải pháp liên quan đến việc tạo ra một số logic có vị trí, thực hiện một số phép tính và xuất ra id DIV. Có vẻ như không có câu trả lời dễ dàng.
Vâng, tôi nghĩ nó sẽ như thế. Đặc biệt đối với các tình huống loại div.contains(). –
Một tùy chọn là tạo một mảng các đối tượng "thứ nguyên div". (Không được nhầm lẫn với các divs mình ... IE7 perf là bực bội khi bạn đọc kích thước tắt của đối tượng.)
Các đối tượng này bao gồm một con trỏ đến div, kích thước của chúng (bốn điểm ... nói trên, trái, dưới, và bên phải), và có thể là một chút bẩn. (Bit bẩn chỉ thực sự cần thiết nếu các kích thước thay đổi.
Sau đó bạn có thể lặp qua mảng và kiểm tra kích thước, yêu cầu O (n) thực hiện điều đó trên mỗi lần di chuyển chuột. cách tiếp cận kiểu tìm kiếm nhị phân ... có thể
Nếu bạn thực hiện phương pháp tìm kiếm kiểu nhị phân, một cách là lưu 4 mảng. 4logn) = O (logn).
tôi không nói rằng tôi khuyên bạn nên bất kỳ trong số này, nhưng họ có thể làm việc.
Nếu tất cả các bạn có là X và Y p osition, (và bạn không thể theo dõi chuyển động của chuột như bạn đã đề cập) thì bạn sẽ phải đi qua DOM, lặp qua từng DIV. Đối với mỗi DIV, bạn sẽ cần phải so sánh các tọa độ X và Y của nó so với các tọa độ bạn có. Đây là một hoạt động đắt tiền, nhưng đó là cách duy nhất. Tôi đề nghị bạn nên suy nghĩ lại vấn đề của mình thay vì tìm ra giải pháp cho nó.
Bạn có thể thấy hiệu quả hơn khi duyệt qua cây DOM khi trang được tải, nhận vị trí và kích thước của tất cả các phần tử và lưu trữ chúng trong một mảng/băm/v.v. Nếu bạn thiết kế cấu trúc dữ liệu tốt, bạn sẽ có thể tìm thấy một phần tử tại các tọa độ nhất định khá nhanh chóng khi bạn cần nó sau này.
Cân nhắc tần suất bạn cần phát hiện yếu tố và so sánh tần suất với các yếu tố trên trang sẽ thay đổi. Bạn sẽ cân bằng số lần bạn phải tính lại tất cả các vị trí phần tử (tính toán đắt tiền) so với số lần bạn thực sự sử dụng thông tin được tính toán (tương đối rẻ, tôi hy vọng).
Tôi nghĩ điều John nói là bạn có thể sử dụng document.createEvent() để mô phỏng một mousemove tại vị trí bạn muốn. Nếu bạn nắm bắt sự kiện đó, bằng cách thêm một trình xử lý sự kiện vào cơ thể, bạn có thể xem event.target và xem phần tử nào ở vị trí đó. Tôi không chắc chắn về mức độ nào mà IE hỗ trợ phương pháp này, có thể ai đó khác biết?
http://developer.mozilla.org/en/DOM/document.createEvent
Cập nhật: Dưới đây là một plugin jquery đó mô phỏng các sự kiện:
http://jquery-ui.googlecode.com/svn/trunk/tests/simulate/jquery.simulate.js
function getDivByXY(x,y) {
var alldivs = document.getElementsByTagName('div');
for(var d = 0; d < alldivs.length; d++) {
if((alldivs[d].offsetLeft == x) && (alldivs[d].offsetTop == y)) {
return alldivs[d];
}
}
return false;
}
Thật không may, gây ra một sự kiện chuột sản xuất/mô phỏng sẽ không làm việc, kể từ khi bạn gửi nó đi, bạn phải cung cấp một phần tử đích. Vì yếu tố đó là một trong những bạn đang cố gắng tìm ra, tất cả những gì bạn có thể làm là gửi nó lên cơ thể, như thể nó đã sôi sục.
Bạn thực sự còn lại để tự mình thực hiện, theo cách thủ công là đi qua các yếu tố bạn quan tâm và so sánh vị trí/kích thước/zIndex với điểm x/y của bạn và xem liệu chúng có trùng lặp hay không. Ngoại trừ trong IE và gần đây hơn FF3, nơi bạn có thể sử dụng
var el = document.elementFromPoint(x, y);
Xem
http://developer.mozilla.org/En/DOM:document.elementFromPoint
http://msdn.microsoft.com/en-us/library/ms536417(VS.85).aspx
http://stackoverflow.com/questions/2664227/find-element-at -an-absolute-position/19116708 # 19116708 –