elementFromPointはページをスクロールした後にnullを返します

Question

JavaScriptのブックマークレットを使用しています。基本的に私は数百ページのトレーニング資料を通し、すべてがHelveticaからArialに正しくスワップされていることを確認しています。ブックマークレットのコードは以下の通りですが、mousemoveイベントリスナと絶対的に配置された小さなdivが作成されます。 mousemoveイベントでは、divは新しいマウス位置（10pxずつ右下にオフセット）に移動し、elementFromPointでマウスの下の要素を取得し、その要素のfont-familyプロパティを表示します。ああ、それはArialがプロパティ内に表示されるかどうかに基づいてそれは背景色を変更します。

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

（記録のために、私はここにSOの答えからコードを決定するスタイルを盗んだが、私は長くないの後にタブを失ったおかげで、匿名のインターネット男。！） だから、これはすべてが素晴らしい作品 - I UNTIL上から下にスクロールされたページの一部の上にマウスを置くようにしてください。私は画面の一番下にマウスを置いて、ページの上部にスクロールしていて、遠くまでスクロールすると、e.pageXが定義されていないことをログに記録します。

アイデア？

Answer 1

Alrighty以下のコメントを反映するために更新

を更新しました

は、それを考え出しました。私はhttp://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/276742/elementfrompoint-problems-when-window-has-been-scrolled-を見て、div位置や何かを計算する前に、e.pageX/Yの値からすぐにマイナスのページオフセットを取らなければならないと思っていました。無関係 - そうではありません！ 私が今理解しているところから、elementFromPointメソッドはブラウザの現在のビューでポイントを相対的に受け取ります。つまり、ページ全体ではなく、現在見えるものの左上隅を基準にします。要素を取得するときにXとYの値からオフセットをとるだけで修正しました。現在作業中のコードは以下の通りです。

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

マウスで調べる代わりに、すべての葉ノードをチェックするだけではどうですか？いずれかのリーフノードがarialのフォントファミリを有する場合、その祖先の1つがArialのフォントファミリを有することを示すはずである。

まず、ページにjqueryを取得する必要があります。このbookmarklet

を試してみてくださいそして、このコードを実行します。

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

arialNodes変数は「ゴシック」のフォントファミリを持つすべてのリーフノードが含まれている必要があります。これを使用して、どの親要素に宣言があるかを調べることができます。

また、ページが準拠しているかどうかだけを確認したい場合は、長さを確認してください。その後、

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

})();