logo标签列表

在视口外获取指定点的Javascript元素

javascript
6

是否有类似于document.elementFromPoint(x,y)的东西，可用于位于视口外的元素？

根据MDN文档中document.elementFromPoint()的说明(https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint)，

如果指定点在文档的可见范围之外或任一坐标为负，则结果为null。

所以，如果您尝试获取用户视口之外的元素，显然它不起作用。

谢谢！

这个功能请求已经被记录在 https://www.w3.org/Bugs/Public/show_bug.cgi?id=20328 （尽管已经5年没有任何活动了..） - Nickolay
1个回答
11

嘿，我曾经遇到过同样的问题，如果元素不在当前视窗范围内，elementFromPoint将返回null。

我发现你需要滚动到元素位置，使其在视口中可见，然后执行elementFromPoint。

(function() {
  'use strict';
  var api;
  api = function(x,y) {
    var elm, scrollX, scrollY, newX, newY;
    /* stash current Window Scroll */
    scrollX = window.pageXOffset;
    scrollY = window.pageYOffset;
    /* scroll to element */
    window.scrollTo(x,y);
    /* calculate new relative element coordinates */
    newX = x - window.pageXOffset;
    newY = y - window.pageYOffset;
    /* grab the element */
    elm = this.elementFromPoint(newX,newY);
    /* revert to the previous scroll location */
    window.scrollTo(scrollX,scrollY);
    /* returned the grabbed element at the absolute coordinates */
    return elm;
  };
  this.document.elementFromAbsolutePoint = api;
}).call(this);

每当坐标是相对于pageX和pageY的绝对坐标时，您可以简单地使用此命令。

document.elementFromAbsolutePoint(2084, 1536);

这段代码也在 GitHub 上打包成 bower 组件，方便地包含到项目中。

https://github.com/kylewelsby/element-from-absolute-point

希望这能对你的项目有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接