---
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>