elementFromPoint पृष्ठ को स्क्रॉल करने के बाद शून्य लौटाता है

Question

मेरे पास एक जावास्क्रिप्ट बुकमार्कमार्क है जो मैंने एक कठिन कार्य को थोड़ा और अधिक सहनशील बनाने के लिए एक साथ रखा है। अनिवार्य रूप से मैं प्रशिक्षण सामग्री के सैकड़ों पृष्ठों से गुजर रहा हूं और यह सुनिश्चित कर रहा हूं कि यह सब ठीक से हेल्वैटिका से एरियल में बदल दिया गया है। बुकमार्कलेट कोड नीचे है, लेकिन एक त्वरित टूटना यह है कि यह एक मूसोम घटना श्रोता और एक छोटा, बिल्कुल स्थित div बना देता है। Mousemove घटनाओं पर, div नई माउस स्थिति (10px नीचे और दाएं से ऑफसेट) पर चला जाता है, तत्व के साथ तत्व के साथ तत्व प्राप्त करता है FromPoint और उस तत्व के लिए फ़ॉन्ट-पारिवारिक संपत्ति दिखाता है। ओह और यह संपत्ति के भीतर एरियल दिखाई देता है या नहीं, इसके आधार पर यह पृष्ठभूमि का रंग बदलता है।

var bodyEl=document.getElementsByTagName("body")[0]; 
var displayDiv=document.createElement("div"); 
displayDiv.style.position="absolute"; 
displayDiv.style.top="0px"; 
displayDiv.style.top="0px"; 
bodyEl.appendChild(displayDiv); 


function getStyle(el,styleProp) { 
    var camelize = function (str) { 
    return str.replace(/\-(\w)/g, function(str, letter){ 
     return letter.toUpperCase(); 
    }); 
    }; 

    if (el.currentStyle) { 
    return el.currentStyle[camelize(styleProp)]; 
    } else if (document.defaultView && document.defaultView.getComputedStyle) { 
    return document.defaultView.getComputedStyle(el,null) 
           .getPropertyValue(styleProp); 
    } else { 
    return el.style[camelize(styleProp)]; 
    } 
} 
function getTheElement(x,y) {return document.elementFromPoint(x,y);} 

fn_displayFont=function displayFont(e) { 
    e = e || window.event; 
    var divX=e.pageX+10; 
    var divY=e.pageY+10; 
    var font=getStyle(getTheElement(e.pageX,e.pageY),"font-family"); 
    if (font.toLowerCase().indexOf("arial") != -1) { 
     displayDiv.style.backgroundColor = "green"; 
    } else { 
     displayDiv.style.backgroundColor = "red"; 
    } 
    displayDiv.style.top= divY.toString() + "px"; 
    displayDiv.style.left= divX.toString() + "px"; 
    displayDiv.style.fontFamily=font; 
    displayDiv.innerHTML=font; 
} 

window.addEventListener('mousemove', fn_displayFont); 
document.onkeydown = function(evt) { 
    evt = evt || window.event; 
    if (evt.keyCode == 27) { 
     window.removeEventListener('mousemove', fn_displayFont); 
     bodyEl.removeChild(displayDiv); 
    } 
}; 

(रिकार्ड के लिए, मैं शैली एक जवाब इतने पर यहां से कोड निर्धारित करने चुरा लिया है, लेकिन मैं टैब खो लंबे समय के बाद नहीं धन्यवाद, अनाम इंटरनेट पुरुष।!) तो यह सब अच्छा काम करता है - मैं जब तक शीर्ष से नीचे स्क्रॉल किए गए पृष्ठ के एक भाग पर होवर करने का प्रयास करें। Div पृष्ठ पर सबसे ऊपर स्क्रॉल करते समय स्क्रीन के बहुत नीचे माउस था, और अगर मैं नीचे स्क्रॉल करता हूं तो लॉग इन शुरू होता है कि e.pageX अपरिभाषित है।

कोई विचार?

Answer 1

Alrighty टिप्पणी प्रतिबिंबित करने के लिए अद्यतन किया गया, यह पता लगा। मैंने http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/276742/elementfrompoint-problems-when-window-has-been-scrolled- देखा और सोचा कि इसका मतलब है कि मुझे ई-पेजएक्स/वाई मानों से सीधे पृष्ठऑफसेट को कम करना था, इससे पहले कि मैंने इसे div स्थिति या किसी और चीज की गणना करने के लिए उपयोग किया, यह मेरे लिए सब कुछ तोड़ दिया, इसलिए मुझे लगता है कि यह होना चाहिए असंबंधित - ऐसा नहीं! जो अब मैं तत्व को समझता हूं, फ्रॉमपॉइंट विधि ब्राउज़र के वर्तमान दृश्य में एक बिंदु रिश्तेदार लेती है, जो कहने के लिए, वर्तमान में जो देखा जा सकता है, उसके शीर्ष बाएं कोने पर आधार, पूरे पृष्ठ पर नहीं। जब मैं तत्व प्राप्त कर रहा था तो मैंने एक्स और वाई मानों से ऑफसेट ले कर इसे ठीक कर दिया। अब काम करने वाला कोड नीचे है।

var bodyEl=document.getElementsByTagName("body")[0]; 
var displayDiv=document.createElement("div"); 
displayDiv.style.position="absolute"; 
displayDiv.style.top="0px"; 
displayDiv.style.top="0px"; 
bodyEl.appendChild(displayDiv); 


function getStyle(el,styleProp) { 
    var camelize = function (str) { 
    return str.replace(/\-(\w)/g, function(str, letter){ 
     return letter.toUpperCase(); 
    }); 
    }; 

    if (el.currentStyle) { 
    return el.currentStyle[camelize(styleProp)]; 
    } else if (document.defaultView && document.defaultView.getComputedStyle) { 
    return document.defaultView.getComputedStyle(el,null) 
           .getPropertyValue(styleProp); 
    } else { 
    return el.style[camelize(styleProp)]; 
    } 
} 
function getTheElement(x,y) {return document.elementFromPoint(x,y);} 

fn_displayFont=function displayFont(e) { 
    e = e || window.event; 
    var divX=e.pageX + 10; 
    var divY=e.pageY + 10; 
    var font=getStyle(getTheElement(e.pageX - window.pageXOffset,e.pageY - window.pageYOffset),"font-family"); 
    if (font.toLowerCase().indexOf("arial") != -1) { 
     displayDiv.style.backgroundColor = "green"; 
    } else { 
     displayDiv.style.backgroundColor = "red"; 
    } 
    displayDiv.style.top= divY.toString() + "px"; 
    displayDiv.style.left= divX.toString() + "px"; 
    displayDiv.style.fontFamily=font; 
    displayDiv.innerHTML=font; 
} 

document.addEventListener('mousemove', fn_displayFont); 
document.onkeydown = function(evt) { 
    evt = evt || window.event; 
    if (evt.keyCode == 27) { 
     window.removeEventListener('mousemove', fn_displayFont); 
     bodyEl.removeChild(displayDiv); 
    } 
}; 

Answer 2

माउस के साथ जांच करने के बजाय हम्म, क्यों न केवल प्रत्येक पत्ता नोड की जांच करें? यदि किसी भी पत्ती नोड में एरियल का फ़ॉन्ट-फ़ैमिली होता है, तो यह इंगित करना चाहिए कि उसके पूर्वजों में से एक एरियल का फ़ॉन्ट-फ़ैमिली है।

सबसे पहले आपको पृष्ठ पर jquery प्राप्त करने की आवश्यकता है। इस bookmarklet

फिर इस कोड को चलाने का प्रयास करें:

(function(){ 
    var arialNodes = $('div:not(:has(*))').filter(function(){ 
     return $(this).css('font-family').toLowerCase().indexOf("arial") != -1; 
    }); 
})(); 

arialNodes चर हर पत्ती नोड 'एरियल' का एक font-family है कि शामिल करना चाहिए। इसके बाद आप यह पता लगाने के लिए उपयोग कर सकते हैं कि कौन से मूल तत्व की घोषणा है।

या यदि आप देखना चाहते हैं कि कोई पृष्ठ अनुपालन है या नहीं, तो बस लंबाई की जांच करें।

अपडेट किया गया

तो नीचे

(function() { 
    var arialNodes = $('*:not(:has(*))', $('body')).filter(function() { 
     return $(this).css('font-family').toLowerCase().indexOf("arial") === -1; 
    }); 

    var offendingParents = []; 
    arialNodes.each(function(){ 
     var highestOffendingParent = $(this).parentsUntil('body').filter(function(){ 
      return $(this).css('font-family').toLowerCase().indexOf("arial") === -1; 
     }).last(); 
     if(offendingParents.indexOf(highestOffendingParent) === -1){ 
      offendingParents.push(highestOffendingParent); 
     } 
    }); 

})();