files/zh-cn/conflicting/web/api/documentorshadowroot/elementsfrompoint/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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

---
title: Document.elementsFromPoint()
slug: conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint
translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint
translation_of_original: Web/API/Document/elementsFromPoint
original_slug: Web/API/Document/elementsFromPoint
---
<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>

<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</p>

<h2 id="语法">语法</h2>

<pre class="brush: js">var<em> elements</em> = <em>document</em>.elementsFromPoint(<em>x</em>, <em>y</em>);</pre>

<h3 id="返回值">返回值</h3>

<p>一个包含多个元素的数组</p>

<h3 id="参数">参数</h3>

<dl>
 <dt>x</dt>
 <dd>当前视口内某一点的横坐标</dd>
 <dt>y</dt>
 <dd>当前视口内某一点的纵坐标</dd>
</dl>

<h2 id="Example" name="Example">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;
  &lt;p&gt;Some text&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;Elements at point 30, 20:&lt;/p&gt;
&lt;div id="output"&gt;&lt;/div&gt;
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js;highlight[1]">var output = document.getElementById("output");
if (document.elementsFromPoint) {
  var elements = document.elementsFromPoint(30, 20);
  for(var i = 0; i &lt; elements.length; i++) {
    output.textContent += elements[i].localName;
    if (i &lt; elements.length - 1) {
      output.textContent += " &lt; ";
    }
  }
} else {
  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
     "您的浏览器不支持 &lt;code&gt;document.elementsFromPoint()&lt;/code&gt;" +
     "&lt;/span&gt;";
}</pre>

<p>{{EmbedLiveSample('Example', '420', '120')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td> {{CompatChrome(43.0)}}</td>
   <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td>
   <td>10.0 {{property_prefix("ms")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatSafari(11)}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(43.0)}}</td>
   <td>{{CompatGeckoMobile("46.0")}}<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatSafari(11)}}</td>
   <td>{{CompatChrome(43.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p> </p>