javascript - elementFromPoint 滚动页面后返回 null

Question

我有一个 javascript 小书签，我把它放在一起，让一项艰巨的任务变得更容易忍受。本质上，我正在浏览数百页的培训 Material ，并确保所有内容都已从 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 上的一个答案中窃取了样式确定代码，但不久之后我丢失了标签。谢谢，匿名互联网人!)所以这一切都很好 - 直到我尝试将鼠标悬停在从顶部向下滚动的页面的一部分上。如果我在滚动到页面顶部时将鼠标放在屏幕的最底部，那么 div 就会位于该位置，如果我向下滚动足够远，firebug 就会开始记录 e.pageX 未定义。

有什么想法吗？

Answer 1

好吧，想通了。我看到了http://www.daniweb.com/web-development/javascript-dhtml-ajax/threads/276742/elementfrompoint-problems-when-window-has-been-scrolled-并认为这意味着我必须直接从 e.pageX/Y 值中减去 pageoffset，在我用它来计算 div 位置或其他任何东西之前，这对我来说破坏了一切，所以我认为它一定是不相关的 - 不是所以!根据我现在的理解，elementFromPoint 方法在浏览器的当前 View 中获取一个相对点，也就是说，基于当前可以看到的内容的左上角，而不是整个页面。我在获取元素时通过从 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);
    }
};