jquery - document.elementFromPoint 在 jQuery 中不起作用

Question

我正在尝试创建一个 jQuery 脚本来查找所需元素在给定坐标处是否可见(未对其他元素隐藏)。

为了这个目标，我尝试使用 document.elementFromPoint 函数，但它似乎不起作用(请参阅 jsFiddle )。

JS

var test = $("#test");
var debug = $("#debug");

// "test" is larger than 100x100 px, so I suppose to find it here
if(document.elementFromPoint(100,100) === test) {
    debug.html("found!");
}
else {
    debug.html("not found");
}

我错过了什么？

Answer 1

elementFromPoint返回 DOMElement ，所以你需要获取 DOM 元素而不是 jQuery 对象:

if(document.elementFromPoint(100,100) === test[0]) {
    debug.html("found!");
}
else {
    debug.html("not found");
}

另一种方法是使用 is jQuery 方法 this way :

if(test.is(document.elementFromPoint(100,100))) {
   /* found */
}
else {
   /* not found */
}

Document.elementFromPoint()

Returns the element from the document whose elementFromPoint method is being called which is the topmost element which lies under the given point. To get an element, specify the point via coordinates, in CSS pixels, relative to the upper-left-most point in the window or frame containing the document.

---

.is( elements )

Description: Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

• elements

  Type: Element

  One or more elements to match the current set of elements against.

<小时/>

var test = $("#test");
var debug = $("#debug");

if (document.elementFromPoint(100, 100) === test[0]) {
  debug.html("found!");
} else {
  debug.html("not found");
}

#test {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<p id="debug"></p>