Định vị phần tử DOM theo tọa độ tuyệt đối

Question

Có cách nào đơn giản để xác định tất cả các phần tử DOM "che" (nghĩa là, nằm trong ranh giới của nó) pixel với cặp tọa độ X/Y không?

Answer 1

Bạn có thể xem document.elementFromPoint mặc dù tôi không biết trình duyệt nào hỗ trợ nó.
Firefox và Chrome có. It is also in the MSDN, nhưng tôi không quen thuộc với tài liệu này vì vậy tôi không biết trong đó phiên bản IE được bao gồm.

Cập nhật:

Để tìm tất cả các yếu tố đó là bằng cách nào đó tại vị trí này, bạn có thể làm cho các giả định rằng tất cả các yếu tố cũng của cha mẹ đang ở vị trí này. Tất nhiên điều này không làm việc với các yếu tố vị trí tuyệt đối.

elementFromPoint sẽ chỉ cung cấp cho bạn yếu tố phía trước nhất. Để thực sự tìm thấy những người khác, bạn sẽ phải đặt display của phần tử phía trước nhất thành none và sau đó chạy lại chức năng. Nhưng người dùng có lẽ sẽ nhận thấy điều này. Bạn sẽ phải thử.

Answer 2

tôi không thể ngăn bản thân mình để nhảy về câu trả lời Felix Kling của:

var $info = $('<div>', { 
    css: {  
     position: 'fixed', 
     top:   '0px', 
     left:  '0px', 
     opacity:  0.77, 
     width:  '200px', 
     height:  '200px', 
     backgroundColor: '#B4DA55', 
     border:  '2px solid black' 
    } 
}).prependTo(document.body); 

$(window).bind('mousemove', function(e) { 
    var ele = document.elementFromPoint(e.pageX, e.pageY); 
    ele && $info.html('NodeType: ' + ele.nodeType + '<br>nodeName: ' + ele.nodeName + '<br>Content: ' + ele.textContent.slice(0,20)); 
}); 

cập nhật: background-color!

Answer 3

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.