Làm thế nào tôi có thể nhận được danh sách các phần tử DOM được tọa lạc tại một vị trí nhất định trong trang

Question

thể trùng lặp:
Locating DOM element by absolute coordinates

Tôi muốn tìm hiểu danh sách của tất cả các Các phần tử DOM được đặt tại vị trí mà con chuột của tôi được nhấp. Tôi yêu cầu làm điều này bằng cách sử dụng javascript hoặc jquery. Ai đó có thể đề nghị tôi làm thế nào tôi có thể làm điều này?

Answer 1

Tôi muốn sử dụng jQuery để thực hiện việc này, bắt đầu từ phần tử được nhấp và nhận danh sách tất cả các yếu tố được nhấp. Thêm một handler vào tài liệu trên click chuột:

$(document).click(function(event) { 
    // event.currentTarget is the clicked element 
    // this is a list of all the parents of the clicked element 
    $(event.currentTarget).parents(); 
} 

Answer 2

Kiểm tra này - http://jsfiddle.net/blackpla9ue/U2RCE/5/
Bấm vào chữ 'thế giới' để xem nó trong hành động.

Điều này cũng hoạt động ở absolute các yếu tố vị trí.

$('*').click(function(event){ 
    console.log($(this)[0].tagName + ' ' + $(this)[0].className); 
});​ 

Answer 3

Bạn không thể mô phỏng nhấp chuột bằng vị trí phối hợp bằng javascript (nghĩ về vấn đề bảo mật), vì vậy tôi không nghĩ bạn có thể thực hiện những gì bạn đang muốn làm. Ngoài ra, không có cách nào có lập trình để xem các lớp nào có thể tồn tại ở vị trí x/y tùy ý trên một trang. Nếu bạn chỉ đang cố gỡ lỗi nội dung nào đó và muốn xem mọi thứ ở vị trí x, y nhất định trên trang, chỉ cần xóa từng phần tử trong trình kiểm tra Firebug hoặc Chrome khi bạn xem xong và sử dụng trình kiểm tra để xem nội dung bên dưới nó.

Nếu bạn thực sự cần một công cụ thực hiện những gì bạn muốn, bạn có thể sử dụng kết hợp jquery và một trình duyệt bổ trợ. Bạn có thể viết tiện ích mở rộng của Chrome hoặc Firefox mô phỏng nhấp chuột thực sự với tọa độ event.x và event.y. Sau đó, bạn có thể sử dụng đề xuất đã đề cập ở trên để chụp tất cả các bậc cha mẹ của phần tử được nhấp. Khi bạn đã tạo danh mục các phần tử đó, hãy tìm cha mẹ trên cùng của mục được nhấp, sao chép nó, xóa tất cả các phần tử của bản sao ngoại trừ chính phần tử gốc trên cùng và đặt nền của bố mẹ trên cùng này thành trong suốt. Bây giờ hãy thay thế phần tử gốc trong DOM bằng phần tử nhân bản trong suốt này. Bằng cách này, bạn giữ nguyên bố cục của trang và khi bạn mô phỏng một nhấp chuột khác, bạn thực sự nhấp vào "qua" phần tử cao nhất (trong suốt) và nhấp vào phần tử DOM tiếp theo (nếu có) phía sau nó. Lặp lại quá trình trên cho đến khi bạn đạt đến thẻ body. Cuối cùng, bạn sẽ có danh sách đầy đủ tất cả các phần tử DOM tại một vị trí x, y cụ thể.

Answer 4

này không được công việc (fiddle):

$(document).click(function(e) { 
    var hitElements = getHitElements(e); 
}); 

var getHitElements = function(e) { 
    var x = e.pageX; 
    var y = e.pageY; 
    var hitElements = []; 

    $(':visible').each(function() { 
     var offset = $(this).offset(); 
     if (offset.left < x && (offset.left + $(this).outerWidth() > x) && (offset.top < y && (offset.top + $(this).outerHeight() > y))) { 
      hitElements.push($(this)); 
     } 
    }); 

    return hitElements; 
}​ 

Khi sử dụng :visible, bạn nên lưu ý điều này:

Elements với visibility: hidden hoặc opacity: 0 được coi là có thể nhìn thấy, vì họ vẫn tiêu thụ không gian trong bố cục. Trong hoạt ảnh ẩn phần tử, phần tử được coi là hiển thị cho đến khi kết thúc hoạt ảnh. Trong quá trình hoạt ảnh để hiển thị phần tử, phần tử là được coi là hiển thị khi bắt đầu hoạt ảnh.

Vì vậy, dựa trên nhu cầu của bạn, bạn sẽ muốn loại trừ các yếu tố visibility:hidden và opacity:0.