---
title: Touch
slug: Web/API/Touch
translation_of: Web/API/Touch
---
<p>{{ APIRef("Touch Events") }}</p>

<p><strong><code>Touch</code></strong> 介面表示了一個於觸控裝置上接觸的單一觸碰點。觸碰點通常是由手指或觸控筆所接觸，而裝置可能為觸控螢幕或觸控板。</p>

<p>{{ domxref("Touch.radiusX") }}、{{ domxref("Touch.radiusY") }} 及 {{ domxref("Touch.rotationAngle") }} 描述了使用者與螢幕之間接觸的區域—<em>觸碰區（touch area）</em>，這對處理不精確的指向設備（如手指）來說相當有幫助。這些數值被用來描述一個盡可能與整個接觸面積相匹配的橢圓（如使用者的指尖）。{{experimental_inline}}</p>

<div class="note">
<p><strong>Note:</strong> Many of the properties' values are hardware-dependent; for example, if the device doesn't have a way to detect the amount of pressure placed on the surface, the <code>force</code> value will always be 0. This may also be the case for <code>radiusX</code> and <code>radiusY</code>; if the hardware reports only a single point, these values will be 1.</p>
</div>

<h2 id="建構式">建構式</h2>

<dl>
 <dt>{{domxref("Touch.Touch", "Touch()")}} {{experimental_inline}}</dt>
 <dd>Creates a Touch object.</dd>
</dl>

<h2 id="屬性">屬性</h2>

<p><em>This interface has no parent, and doesn't inherits or implements any other property.</em></p>

<h3 id="基本屬性">基本屬性</h3>

<dl>
 <dt>{{ domxref("Touch.identifier") }} {{readonlyInline}}</dt>
 <dd>Returns a unique identifier for this <code>Touch</code> object. A given touch point (say, by a finger) will have the same identifier for the duration of its movement around the surface. This lets you ensure that you're tracking the same touch all the time.</dd>
 <dt><strong>{{ domxref("Touch.screenX") }} </strong>{{readonlyInline}}</dt>
 <dd>Returns the X coordinate of the touch point relative to the left edge of the screen.</dd>
 <dt><strong>{{ domxref("Touch.screenY") }} </strong>{{readonlyInline}}</dt>
 <dd>Returns the Y coordinate of the touch point relative to the top edge of the screen.</dd>
 <dt><strong>{{ domxref("Touch.clientX") }} </strong>{{readonlyInline}}</dt>
 <dd>Returns the X coordinate of the touch point relative to the left edge of the browser viewport, not including any scroll offset.</dd>
 <dt><strong>{{ domxref("Touch.clientY") }} </strong>{{readonlyInline}}</dt>
 <dd>Returns the Y coordinate of the touch point relative to the top edge of the browser viewport, not including any scroll offset.</dd>
 <dt>{{ domxref("Touch.pageX") }} {{readonlyInline}}</dt>
 <dd>Returns the X coordinate of the touch point relative to the left edge of the document. Unlike <code>clientX</code>, this value includes the horizontal scroll offset, if any.</dd>
 <dt>{{ domxref("Touch.pageY") }} {{readonlyInline}}</dt>
 <dd>Returns the Y coordinate of the touch point relative to the top of the document. Unlike <code>clientY,</code> this value includes the vertical scroll offset, if any.</dd>
 <dt>{{ domxref("Touch.target") }} {{readonlyInline}}</dt>
 <dd>Returns the {{ domxref("Element")}} on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of that element or even been removed from the document.</dd>
</dl>

<h3 id="觸碰區（Touch_area）">觸碰區（Touch area）</h3>

<p>{{SeeCompatTable}}</p>

<dl>
 <dt>{{ domxref("Touch.radiusX") }} {{readonlyInline}} {{experimental_inline}}</dt>
 <dd>Returns the X radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as <code>screenX</code>.</dd>
 <dt>{{ domxref("Touch.radiusY") }} {{readonlyInline}} {{experimental_inline}}</dt>
 <dd>Returns the Y radius of the ellipse that most closely circumscribes the area of contact with the screen. The value is in pixels of the same scale as <code>screenY</code>.</dd>
 <dt>{{ domxref("Touch.rotationAngle") }} {{readonlyInline}} {{experimental_inline}}</dt>
 <dd>Returns the angle (in degrees) that the ellipse described by radiusX and radiusY must be rotated, clockwise, to most accurately cover the area of contact between the user and the surface.</dd>
 <dt>{{ domxref("Touch.force") }}{{readonlyInline}} {{experimental_inline}}</dt>
 <dd>Returns the amount of pressure being applied to the surface by the user, as a <code>float</code> between <code>0.0</code> (no pressure) and <code>1.0</code> (maximum pressure).</dd>
</dl>

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

<p><em>This interface has no method and no parent, and doesn't inherits or implements any method.</em></p>

<dl>
</dl>

<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('Touch Events 2', '#touch-interface', 'Touch')}}</td>
   <td>{{Spec2('Touch Events 2')}}</td>
   <td>Added <code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code> properties, as well as the <code>Touch()</code> constructor.</td>
  </tr>
  <tr>
   <td>{{SpecName('Touch Events', '#touch-interface', 'Touch')}}</td>
   <td>{{Spec2('Touch Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="瀏覽器相容性">瀏覽器相容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome("22.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
    {{CompatGeckoDesktop("52.0")}}<sup>[2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td><code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Touch()</code> constructor</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</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>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("6.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>11</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>radiusX</code>, <code>radiusY</code>, <code>rotationAngle</code>, <code>force</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("6.0")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>Touch()</code> constructor</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Touch events were implemented in Gecko 18.0, but removed again in 24.0 {{geckoRelease("24.0")}} on the desktop version of Firefox due to web compatibility issues ({{bug(888304)}}).</p>

<p>[2] As of Gecko 52.0, touch events support has been fixed and reenabled in Windows desktop platforms.</p>

<h2 id="參見">參見</h2>

<ul>
 <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
 <li>{{ domxref("Document.createTouch()") }}</li>
</ul>

<dl>
</dl>