पूर्ण निर्देशांक द्वारा डीओएम तत्व ढूंढना

Question

क्या सभी डीओएम तत्वों का पता लगाने का एक आसान तरीका है जो "कवर" (यानी, इसकी सीमाओं के भीतर) एक्स/वाई समन्वय जोड़ी के साथ एक पिक्सेल है?

Answer 1

आप document.elementFromPoint पर एक नज़र डाल सकते हैं, हालांकि मुझे नहीं पता कि कौन से ब्राउज़र इसका समर्थन करते हैं।
फ़ायरफ़ॉक्स और क्रोम करते हैं। It is also in the MSDN, लेकिन मैं इस दस्तावेज़ से इतना परिचित नहीं हूं इसलिए मुझे नहीं पता कि आईई संस्करण में यह शामिल है।

अद्यतन:

सभी तत्वों को इस स्थिति में किसी भी तरह कर रहे हैं खोजने के लिए, आप इस धारणा है कि यह भी माता-पिता के सभी तत्वों को इस स्थिति में हैं बना सकता है। बेशक यह पूर्ण स्थान तत्वों के साथ काम नहीं करता है।

elementFromPoint केवल आपको सबसे आगे तत्व प्रदान करेगा। वास्तव में दूसरों को ढूंढने के लिए आपको को सबसे अधिक तत्व के none पर सेट करना होगा और फिर फ़ंक्शन को फिर से चलाया जाना होगा। लेकिन उपयोगकर्ता शायद यह ध्यान देगा। आपको कोशिश करनी होगी।

Answer 2

मैं नहीं रोक पाया अपने आप फेलिक्स Kling के जवाब पर कूदने के लिए:

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)); 
}); 

अद्यतन: पृष्ठभूमि रंग!

Answer 3

यह काम (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; 
}​ 

जब :visible का उपयोग कर, तो आप इस के बारे में पता होना चाहिए:

दृश्यता वाले तत्व: छिपा हुआ या अस्पष्टता: 0 दिखाई माना जाता है, चूंकि वे अभी भी लेआउट में जगह का उपभोग करते हैं। एनिमेशन के दौरान तत्व को छुपाएं, तत्व को एनीमेशन के तक दिखाई देने वाला माना जाता है। एनीमेशन दिखाने के लिए एनिमेशन के दौरान, तत्व एनीमेशन में शुरुआत में दिखाई देने वाला माना जाता है।

तो, आपकी आवश्यकता के आधार पर, आप visibility:hidden और opacity:0 तत्वों को बाहर करना चाहते हैं।