files/zh-cn/conflicting/web/api/documentorshadowroot/elementfrompoint/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

---
title: Document.elementFromPoint()
slug: conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint
translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
translation_of_original: Web/API/Document/elementFromPoint
original_slug: Web/API/Document/elementFromPoint
---
<div>
 {{APIRef()}} {{Fx_minversion_header(3)}}</div>
<h2 id="Summary" name="Summary">概述</h2>
<p>返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<pre><em>var element</em> = document.elementFromPoint(<em>x</em>, <em>y</em>);</pre>
<ul>
 <li><code>element</code> 是返回的DOM<a href="/en-US/docs/DOM/element" title="DOM/element">元素</a>.</li>
 <li><code>x</code> 和 <code>y</code> 是坐标数值, 不需要单位比如px.</li>
</ul>
<h2 id="Example" name="Example">示例</h2>
<pre class="brush:html">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;elementFromPoint example&lt;/title&gt;

&lt;script&gt;
function changeColor(newColor) {
  elem = document.elementFromPoint(2, 2);
  elem.style.color = newColor;
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p id="para1"&gt;Some text here&lt;/p&gt;
&lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
&lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<h2 id="Notes" name="Notes">附注</h2>
<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.</p>
<p>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>null</code>.</p>
<p>{{Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}</p>
<h2 id="Specification" name="Specification">规范</h2>
<ul>
 <li>Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint">elementFromPoint</a></code></li>
</ul>