initial commit

4 files changed, 312 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/touchevent/changedtouches/index.html b/files/zh-cn/web/api/touchevent/changedtouches/index.html
new file mode 100644
index 0000000000..a286e3a674
--- /dev/null
+++ b/files/zh-cn/web/api/touchevent/changedtouches/index.html
@@ -0,0 +1,34 @@
+---
+title: TouchEvent.changedTouches
+slug: Web/API/TouchEvent/changedTouches
+translation_of: Web/API/TouchEvent/changedTouches
+---
+<p>{{ ApiRef() }}</p>
+
+<h3 id="Summary" name="Summary">概述</h3>
+
+<p>这个 {{ domxref("TouchList") }} 对象列出了和这个触摸事件对应的 {{ domxref("Touch") }} 对象。</p>
+
+<ul>
+ <li>对于 <code>touchstart</code> 事件, 这个 {{ domxref("TouchList") }} 对象列出在此次事件中新增加的触点。</li>
+ <li>对于 <code>touchmove 事件，列出和上一次事件相比较，发生了变化的触点。</code></li>
+ <li><code>对于touchend事件，<strong>changedTouches</strong></code> 是<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">已经从</span></font>触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。</li>
+</ul>
+
+<h3 id="Syntax" name="Syntax">语法</h3>
+
+<pre class="eval">var <em>touches</em> = <em>touchEvent</em>.changedTouches;
+</pre>
+
+<p>这是一个只读属性。</p>
+
+<h3 id="Return_Value" name="Return_Value">返回值</h3>
+
+<dl>
+ <dt><code>touches</code></dt>
+ <dd>列出对应这个触摸事件的 {{ domxref("Touch") }} 对象的 {{ domxref("TouchList") }} 对象。</dd>
+</dl>
+
+<h3 id="Specification" name="Specification">标准定义</h3>
+
+<p><a class="external" href="http://www.w3.org/TR/touch-events/" title="http://www.w3.org/TR/touch-events/">Touch Events Specification</a></p>
diff --git a/files/zh-cn/web/api/touchevent/index.html b/files/zh-cn/web/api/touchevent/index.html
new file mode 100644
index 0000000000..7ca4bb4235
--- /dev/null
+++ b/files/zh-cn/web/api/touchevent/index.html
@@ -0,0 +1,143 @@
+---
+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" title="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>
diff --git a/files/zh-cn/web/api/touchevent/targettouches/index.html b/files/zh-cn/web/api/touchevent/targettouches/index.html
new file mode 100644
index 0000000000..5b09634380
--- /dev/null
+++ b/files/zh-cn/web/api/touchevent/targettouches/index.html
@@ -0,0 +1,60 @@
+---
+title: TouchEvent.targetTouches
+slug: Web/API/TouchEvent/targetTouches
+translation_of: Web/API/TouchEvent/targetTouches
+---
+<p id="Summary">{{ APIRef("Touch Events") }}</p>
+
+<p><strong><code>targetTouches</code></strong> 是一个只读的 {{ domxref("TouchList") }} 列表，包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象。{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内，它就是当前目标元素。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="brush: js">var <em>touches</em> = <em>touchEvent</em>.targetTouches;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value">返回值</h3>
+
+<dl>
+ <dt><code>touches</code></dt>
+ <dd>一个 {{ domxref("TouchList") }}，包含仍与触摸面接触的所有触摸点的 {{ domxref("Touch") }} 对象，{{event("touchstart")}}事件触发在哪个{{ domxref("element") }}内，它就是当前目标元素。</dd>
+</dl>
+
+<h2 id="Specification" name="Specification">例子</h2>
+
+<p>本例阐述了 {{domxref("TouchEvent")}} 对象的 {{domxref("TouchEvent.targetTouches")}} 属性。{{domxref("TouchEvent.targetTouches")}} 属性也是一个 {{domxref("TouchList")}}，其中包含的触摸点起始于触摸事件当前的目标元素，并且此刻正在触摸屏幕。所以，<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">targetTouches</span></font> 元素是 <code>touches</code> 的真子集。</p>
+
+<p>下面代码段中的函数比较了 <code>touches</code> 列表和 <code>targetTouches</code> 列表的长度，返回值表示他们是否相等。</p>
+
+<pre class="brush: js">function touches_in_target(ev) {
+  // Return true if all of the touches are within the target element;
+  // otherwise return false.
+  return (ev.touches.length == ev.targetTouches.length ? true : false);
+}</pre>
+
+<h2 id="Specification" name="Specification">规格</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','#widl-TouchEvent-targetTouches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>Non-stable version.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-targetTouches')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("api.TouchEvent.targetTouches")}}</p>
diff --git a/files/zh-cn/web/api/touchevent/touches/index.html b/files/zh-cn/web/api/touchevent/touches/index.html
new file mode 100644
index 0000000000..e5c9672b3d
--- /dev/null
+++ b/files/zh-cn/web/api/touchevent/touches/index.html
@@ -0,0 +1,75 @@
+---
+title: TouchEvent.touches
+slug: Web/API/TouchEvent/touches
+tags:
+  - API
+  - DOM
+  - DOM Reference
+  - touch
+translation_of: Web/API/TouchEvent/touches
+---
+<p>{{ APIRef("Touch Events") }}</p>
+
+<h2 id="概要"><font><font>概要</font></font></h2>
+
+<p>一个 {{ domxref("TouchList") }}，其会<font><font>列出所有当前在与触摸表面接触的  </font></font>{{ domxref("Touch") }} 对象<font><font>，不管触摸点是否已经改变或其目标元素是在处于 </font></font><code>touchstart </code>阶段<font><font>。</font></font></p>
+
+<p>此属性是 {{readonlyInline}}。</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<pre class="eval">var <em>touches</em> = <em>touchEvent</em>.touches;
+</pre>
+
+<h3 id="Return_Value" name="Return_Value"><font><font>返回值</font></font></h3>
+
+<dl>
+ <dt><code>touches</code></dt>
+ <dd>一个 {{ domxref("TouchList") }}，其会<font><font>列出所有当前在与触摸表面接触的  </font></font>{{ domxref("Touch") }} 对象<font><font>，不管触摸点是否已经改变或其目标元素是在处于 </font></font><code>touchstart </code>阶段<font><font>。</font></font></dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p><font><font>此示例说明 </font></font>{{domxref("TouchEvent")}}<code> </code><font><font>对象的<font face="consolas, Liberation Mono, courier, monospace"> </font></font></font>{{domxref("TouchEvent.touches")}} <font><font>属性。</font><font>该</font></font>{{domxref("TouchEvent.touches")}} <font><font>属性是一个<font face="consolas, Liberation Mono, courier, monospace"> </font></font></font>{{domxref("TouchList")}}<font><font><font face="consolas, Liberation Mono, courier, monospace"> </font>对象，并包含<font face="consolas, Liberation Mono, courier, monospace"> </font></font></font>{{domxref("Touch")}} <font><font>当前接触表面的每个接触点的对象</font><font>列表</font><font>。</font></font></p>
+
+<p><font><font>在下面的代码片段中，</font></font>{{event("touchstart")}} <font><font>事件处理程序会检查 </font></font>{{domxref("TouchEvent.touches")}}<code> </code><font><font>列表</font><font>的长度，</font><font>以确定激活的触摸点的数量，然后根据触摸点的数量调用不同的处理程序。</font></font></p>
+
+<pre class="brush: js">someElement.addEventListener('touchstart', function(e) {
+   // Invoke the appropriate handler depending on the
+   // number of touch points.
+   switch (e.touches.length) {
+     case 1: handle_one_touch(e); break;
+     case 2: handle_two_touches(e); break;
+     case 3: handle_three_touches(e); break;
+     default: console.log("Not supported"); break;
+   }
+ }, false);
+</pre>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">评价</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events 2','#widl-TouchEvent-touches')}}</td>
+   <td>{{Spec2('Touch Events 2')}}</td>
+   <td>不稳定版</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('Touch Events','#widl-TouchEvent-touches')}}</td>
+   <td>{{Spec2('Touch Events')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
+
+
+
+<p>{{Compat("api.TouchEvent.touches")}}</p>