---
title: TouchEvent
slug: Web/API/TouchEvent
tags:
  - API
  - DOM
  - 参考
  - 接口
  - 触摸
translation_of: Web/API/TouchEvent
---
<p>{{ ApiRef() }}</p>

<p><code>TouchEvent</code> 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。</p>

<p>每 个 {{ domxref("Touch") }} 对象代表一个触点; 每个触点都由其位置，大小，形状，压力大小，和目标 {{ domxref("element") }} 描述。 {{ domxref("TouchList") }} 对象代表多个触点的一个列表.</p>

<h2 id="构造函数">构造函数</h2>

<dl>
 <dt>{{ domxref("TouchEvent.TouchEvent", "TouchEvent()")}}</dt>
 <dd>创建一个{{ domxref("TouchEvent") }}对象。</dd>
</dl>

<h2 id="属性列表">属性列表</h2>

<p><em>{{ domxref("TouchEvent") }}的属性继承了 {{domxref("UIEvent")}} 和 {{domxref("Event")}}。</em></p>

<dl>
 <dt>{{ domxref("event.altKey", "TouchEvent.altKey") }} {{readonlyInline}}</dt>
 <dd>布尔值，指明触摸事件触发时，键盘 alt 键是否被按下。</dd>
 <dt>{{ domxref("TouchEvent.changedTouches") }} {{readonlyInline}}</dt>
 <dd>一个 {{ domxref("TouchList") }} 对象，包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 {{ domxref("Touch") }} 对象。</dd>
 <dt>{{ domxref("event.ctrlKey", "TouchEvent.ctrlKey") }} {{readonlyInline}}</dt>
 <dd>布尔值，指明触摸事件触发时，键盘 ctrl 键是否被按下。</dd>
 <dt>{{ domxref("event.metaKey", "TouchEvent.metaKey") }} {{readonlyInline}}</dt>
 <dd>布尔值，指明触摸事件触发时，键盘 meta 键 （<a href="http://en.wikipedia.org/wiki/Meta_key">Wikipedia - meta Key</a>）是否被按下。</dd>
 <dt>{{ domxref("event.shiftKey", "TouchEvent.shiftKey") }} {{readonlyInline}}</dt>
 <dd>布尔值，指明触摸事件触发时，键盘 shift 键是否被按下。</dd>
 <dt>{{ domxref("TouchEvent.targetTouches") }} {{readonlyInline}}</dt>
 <dd>一个 {{ domxref("TouchList") }} 对象，是包含了如下触点的 {{ domxref("Touch") }} 对象：触摸起始于当前事件的目标 {{ domxref("element") }} 上，并且仍然没有离开触摸平面的触点。</dd>
 <dt>{{ domxref("TouchEvent.touches") }} {{readonlyInline}}</dt>
 <dd>一 个 {{ domxref("TouchList") }} 对象，包含了所有当前接触触摸平面的触点的 {{ domxref("Touch") }} 对象，无论它们的起始于哪个 {{ domxref("element") }} 上，也无论它们状态是否发生了变化。</dd>
</dl>

<h2 id="触摸事件的类型">触摸事件的类型</h2>

<p>为了区别触摸相关的状态改变，存在多种类型的触摸事件。可以通过检查触摸事件的 {{ domxref("event.type", "TouchEvent.type") }} 属性来确定当前事件属于哪种类型</p>

<div class="note"><strong>注意:</strong> 在很多情况下，触摸事件和鼠标事件会同时被触发（目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作）。如果你使用了触摸事件，可以调用 {{ domxref("event.preventDefault()") }} 来阻止鼠标事件被触发。</div>

<h3 id="domxrefElementtouchstart_event_touchstart">{{domxref("Element/touchstart_event", "touchstart")}}</h3>

<p>当用户在触摸平面上放置了一个触点时触发。事件的目标 {{ domxref("element")}} 将是触点位置上的那个目标 {{ domxref("element") }}</p>

<h3 id="domxrefElementtouchend_event_touchend">{{domxref("Element/touchend_event", "touchend")}}</h3>

<p>当一个触点被用户从触摸平面上移除（即用户的一个手指或手写笔离开触摸平面）时触发。当触点移出触摸平面的边界时也将触发。例如用户将手指划出屏幕边缘。</p>

<p>事件的目标 {{ domxref("element") }} 与触发 <code>touchstart</code> 事件的目标 {{ domxref("element") }} 相同，即使 <code>touchend</code> 事件触发时，触点已经移出了该 {{ domxref("element") }} 。</p>

<p>已经被从触摸平面上移除的触点，可以在 <code>changedTouches</code> 属性定义的 {{ domxref("TouchList") }} 中找到。</p>

<h3 id="domxrefElementtouchmove_event_touchmove">{{domxref("Element/touchmove_event", "touchmove")}}</h3>

<p>当用户在触摸平面上移动触点时触发。事件的目标 {{ domxref("element") }} 和触发 <code>touchstart</code> 事件的目标 {{ domxref("element") }} 相同，即使当 <code>touchmove</code> 事件触发时，触点已经移出了该 {{ domxref("element") }} 。</p>

<p>当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。</p>

<div class="note"><strong>注意:</strong> 不同浏览器上 <code>touchmove</code> 事件的触发频率并不相同。这个触发频率还和硬件设备的性能有关。因此决不能让程序的运作依赖于某个特定的触发频率。</div>

<h3 id="domxrefElementtouchcancel_event_touchcancel">{{domxref("Element/touchcancel_event", "touchcancel")}}</h3>

<p>当触点由于某些原因被中断时触发。有几种可能的原因如下（具体的原因根据不同的设备和浏览器有所不同）：</p>

<ul>
 <li>由于某个事件出现而取消了触摸：例如触摸过程被弹窗打断。</li>
 <li>触点离开了文档窗口，而进入了浏览器的界面元素、插件或者其他外部内容区域。</li>
 <li>当用户产生的触点个数超过了设备支持的个数，从而导致 {{ domxref("TouchList") }} 中最早的 {{ domxref("Touch") }} 对象被取消。</li>
</ul>

<h3 id="与_addEventListener_和_preventDefault_一起使用">与 addEventListener() 和 preventDefault() 一起使用</h3>

<p>很值得注意的是，在很多情况下，触摸事件和鼠标事件会一起触发（以使非触摸专用的代码仍然可以与用户交互）。如果你要使用触摸事件，你可以使用 {{domxref("Event.preventDefault","preventDefault()")}} 来取消鼠标事件。</p>

<p>但 Chrome 是例外，从版本56（桌面版、安卓版和安卓 webview）开始，Chrome 中 {{domxref("Element/touchstart_event", "touchstart")}} and {{domxref("Element/touchmove_event", "touchmove")}} 的默认值就是 <code>true</code>，没有必要调用 {{domxref("Event.preventDefault","preventDefault()")}}。如果要重写这个行为，简单地将 <code>passive</code> 设置成 <code>false</code> 就行。这样设置可以阻止监听器在用户滚动时停止页面渲染。<a href="https://developers.google.com/web/updates/2016/06/passive-event-listeners">Google Developer</a> 有一个简单的演示。</p>

<h2 id="全局事件处理">全局事件处理</h2>

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

<dl>
 <dt>{{ domxref("GlobalEventHandlers.ontouchstart") }} {{experimental_inline}}</dt>
 <dd>使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理{{event("touchstart")}} 事件。</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchend") }} {{experimental_inline}}</dt>
 <dd>使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchend")}} 事件。</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchmove") }} {{experimental_inline}}</dt>
 <dd>使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchmove")}} 事件。</dd>
 <dt>{{ domxref("GlobalEventHandlers.ontouchcancel") }} {{experimental_inline}}</dt>
 <dd>使用一个 {{domxref("GlobalEventHandlers","global event handler")}} 处理 {{event("touchcancel")}} 事件。</dd>
</dl>

<h2 id="实例">实例</h2>

<p>请看 <a href="/en/DOM/Touch_events#Example" title="en/DOM/Touch events#Example">example on the main Touch events article</a>.</p>

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

<table>
 <thead>
  <tr>
   <th scope="col"><strong>规范</strong></th>
   <th scope="col"><strong>状态</strong></th>
   <th scope="col"><strong>注释</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Touch Events 2','#touchevent-interface', 'TouchEvent')}}</td>
   <td>{{Spec2('Touch Events 2')}}</td>
   <td>Added <code>ontouchstart</code>, <code>ontouchend</code>, <code>ontouchmove</code>, <code>ontouchend</code> global attribute handlers</td>
  </tr>
  <tr>
   <td>{{SpecName('Touch Events', '#touchevent-interface', 'TouchEvent')}}</td>
   <td>{{Spec2('Touch Events')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

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

<p>{{Compat("api.TouchEvent")}}</p>

<div id="compat-mobile"></div>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>{{domxref("Touch_events","Touch Events Overview")}}</li>
 <li>{{domxref("GestureEvent")}}</li>
 <li>{{domxref("MSGestureEvent")}}</li>
</ul>