blob: f6464480f8ad0260fd7a99ecab83f51f08b15bca (
plain)
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
|
---
title: Proximity
slug: Web/API/Proximity_Events
translation_of: Web/API/Proximity_Events
---
<p>{{ SeeCompatTable }}</p>
<h2 id="摘要">摘要</h2>
<p>近距 (Proximity) 事件可迅速感測出使用者靠近裝置，並迅速做出反應。舉例來說，當使用者接通來電並將裝置靠近耳朵時，智慧型手機隨即關閉螢幕。</p>
<div class="note">
<p><strong>注意：</strong>顯然裝置必須具備近距感測器 (Proximity sensor)，此 API 才能發揮作用。而目前幾乎只有行動裝置搭載接近感測器。若裝置並未搭載感測器，則雖同樣可支援，但永遠不會觸發此類事件。</p>
</div>
<h2 id="近距事件">近距事件</h2>
<p>只要近距感測器測得「裝置」與「物體」之間的距離改變時，就會通知瀏覽器這項變化。而只要瀏覽器獲得通知，隨即啟動 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent" title="/en-US/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a> 以因應任何變化；或啟動 <a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent" title="/en-US/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a> 以因應簡單的變化。</p>
<p>透過 <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" title="/en-US/docs/Web/API/EventTarget.addEventListener"><code>addEventListener</code></a> 函式 (使用 {{event("deviceproximity")}} 或 {{event("userproximity")}} 事件名稱)；或將事件處理器 (Event handler) 附掛至 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.ondeviceproximity" title="/en-US/docs/Web/API/window.ondeviceproximity"><code>window.ondeviceproximity</code></a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.onuserproximity" title="/en-US/docs/Web/API/window.onuserproximity"><code>window.onuserproximity</code></a> 屬性，均可於 <code>window 物件層級就擷取到此事件。</code></p>
<p>在擷取事件之後，事件物件將可存取不同的資訊：</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent" title="/en-US/docs/Web/API/DeviceProximityEvent"><code>DeviceProximityEvent</code></a> 事件透過本身的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.value" title="/en-US/docs/Web/API/DeviceProximityEvent.value"><code>value</code></a> 屬性，可提供裝置與物體之間的確實距離。另透過本身的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.min" title="/en-US/docs/Web/API/DeviceProximityEvent.min"><code>min</code></a> 與 <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceProximityEvent.max" title="/en-US/docs/Web/API/DeviceProximityEvent.max"><code>max</code></a> 屬性，則能設定「裝置測得某物」的最近與最遠距離。</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent" title="/en-US/docs/Web/API/UserProximityEvent"><code>UserProximityEvent</code></a> 事件則提供粗略的距離，並以 Boolean 值呈現。物體靠近時，<a href="https://developer.mozilla.org/en-US/docs/Web/API/UserProximityEvent.near" title="/en-US/docs/Web/API/UserProximityEvent.near"><code>UserProximityEvent.near</code></a> 屬性即為 <code>true</code>；物體遠離則為 <code>false。</code></li>
</ul>
<h2 id="範例">範例</h2>
<pre class="brush: js">window.addEventListener('userproximity', function(event) {
if (event.near) {
// let's power off the screen
navigator.mozPower.screenEnabled = false;
} else {
// Otherwise, let's power on the screen
navigator.mozPower.screenEnabled = true;
}
});</pre>
<h2 id="Specifications" name="Specifications">規格</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('Proximity Events', '', 'Proximity Events') }}</td>
<td>{{ Spec2('Proximity Events') }}</td>
<td>Initial specification</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>{{domxref("DeviceProximityEvent")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
<tr>
<td>{{domxref("UserProximityEvent")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>{{domxref("DeviceProximityEvent")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{ CompatGeckoMobile("15.0") }}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
<tr>
<td>{{domxref("UserProximityEvent")}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatVersionUnknown()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
<td>{{CompatNo()}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="另可參閱">另可參閱</h2>
<ul>
<li>{{domxref("DeviceProximityEvent")}}</li>
<li>{{domxref("UserProximityEvent")}}</li>
<li>{{event("deviceproximity")}}</li>
<li>{{event("userproximity")}}</li>
</ul>
|
