Touch

  • 版本网址缩略名: DOM/Touch
  • 版本标题: Touch
  • 版本 id: 374357
  • 创建于:
  • 创建者: hyspace
  • 是否是当前版本?
  • 评论

修订内容

{{ domref() }}

每个Touch 对象代表一个人和触摸设备(例如触摸屏和触摸板)接触的触点. 

属性

以下属性描述了用户的触摸行为

注意: 以下很多属性的返回值在不同硬件环境下不一样. 例如, 如果触摸设备不能侦测压感, force 属性将始终是1. 同样对于 radiusXradiusY, 如果设备认为触点只是一个点而不是一个面, 它们始终为1.
{{ domxref("Touch.identifier") }}
此 Touch 对象的唯一标识符. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. 只读属性.
{{ domxref("Touch.screenX") }}
触点相对于屏幕左边沿的的X坐标. 只读属性.
{{ domxref("Touch.screenY") }}
触点相对于屏幕上边沿的的Y坐标. 只读属性.
{{ domxref("Touch.clientX") }}
触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移. 只读属性.
{{ domxref("Touch.clientY") }}
触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移. 只读属性.
{{ domxref("Touch.pageX") }}
触点相对于HTML文档左边沿的的X坐标. 和 clientX 属性不同, 当存在水平偏移时, 这个值包含了水平滚动的偏移. 只读属性.
{{ domxref("Touch.pageY") }}
触点相对于HTML文档上边沿的的Y坐标. 和 clientY 属性不同, 当存在水平偏移时, 这个值包含了垂直滚动的偏移. 只读属性.
{{ domxref("Touch.radiusX") }}
能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和 screenX 相同. 只读属性.
{{ domxref("Touch.radiusY") }}
能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和 screenY 相同. 只读属性.
{{ domxref("Touch.rotationAngle") }}
它是这样一个角度值:由radiusXradiusY 描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面. 只读属性.
{{ domxref("Touch.force") }}
手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. 只读属性.
{{ domxref("Touch.target") }}
当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 windowdocument 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. 只读属性.

接触面

{{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, 和 {{ domxref("Touch.rotationAngle") }} 描述了用户和触摸平面的接触面. 这在面向非精确触摸设备(由手指直接操作的触摸屏)开发时非常有用. 这些值描述了一个尽可能接近实际接触面(例如用户的指尖)的椭圆.

示例

请看 example on the main Touch events article.

相关链接

标准定义

Touch Events Specification

修订版来源

<p>{{ domref() }}</p>
<p>每个<code>Touch</code> 对象代表一个人和触摸设备(例如触摸屏和触摸板)接触的触点.&nbsp;</p>
<h2 id=".E5.B1.9E.E6.80.A7">属性</h2>
<p>以下属性描述了用户的触摸行为</p>
<div class="note">
  <strong>注意:</strong> 以下很多属性的返回值在不同硬件环境下不一样. 例如, 如果触摸设备不能侦测压感, <code>force 属性将始终是1. </code>同样对于<code> radiusX</code> 和 <code>radiusY</code>, 如果设备认为触点只是一个点而不是一个面, 它们始终为1.</div>
<dl>
  <dt>
    {{ domxref("Touch.identifier") }}</dt>
  <dd>
    <code>此 Touch 对象的唯一标识符</code>. 一次触摸动作(我们值的是手指的触摸)在平面上移动的整个过程中, 该标识符不变. 可以根据它来判断跟踪的是否是同一次触摸过程. <strong>只读属性.</strong></dd>
  <dt>
    <strong>{{ domxref("Touch.screenX") }}</strong></dt>
  <dd>
    触点相对于屏幕左边沿的的X坐标. <strong>只读属性.</strong></dd>
  <dt>
    <strong>{{ domxref("Touch.screenY") }}</strong></dt>
  <dd>
    触点相对于屏幕上边沿的的Y坐标. <strong>只读属性.</strong></dd>
  <dt>
    <strong>{{ domxref("Touch.clientX") }}</strong></dt>
  <dd>
    触点相对于可见视区(<a href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">visual viewport</a>)左边沿的的X坐标. 不包括任何滚动偏移. <strong>只读属性.</strong></dd>
  <dt>
    <strong>{{ domxref("Touch.clientY") }}</strong></dt>
  <dd>
    触点相对于可见视区(<a href="http://www.quirksmode.org/mobile/viewports2.html" title="http://www.quirksmode.org/mobile/viewports2.html">visual viewport</a>)上边沿的的Y坐标. 不包括任何滚动偏移. <strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.pageX") }}</dt>
  <dd>
    触点相对于HTML文档左边沿的的X坐标. 和 <code>clientX 属性不同, 当存在水平偏移时, 这个值包含了水平滚动的偏移</code>. <strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.pageY") }}</dt>
  <dd>
    触点相对于HTML文档上边沿的的Y坐标. 和 <code>clientY 属性不同, 当存在水平偏移时, 这个值包含了垂直滚动的偏移</code>. <strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.radiusX") }}</dt>
  <dd>
    能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径. 这个值的单位和<code> screenX 相同. </code><strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.radiusY") }}</dt>
  <dd>
    能够包围用户和触摸平面的接触面的最小椭圆的垂直轴(Y轴)半径. 这个值的单位和<code> screenY 相同. </code><strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.rotationAngle") }}</dt>
  <dd>
    <code>它是这样一个角度值:由radiusX</code> 和 <code>radiusY</code> 描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面. <strong>只读属性</strong><strong>.</strong></dd>
  <dt>
    {{ domxref("Touch.force") }}</dt>
  <dd>
    手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数. <strong>只读属性.</strong></dd>
  <dt>
    {{ domxref("Touch.target") }}</dt>
  <dd>
    当这个触点最开始被跟踪时(在 <code>touchstart</code> 事件中), 触点位于的HTML元素. 哪怕在触点移动过程中, 触点的位置已经离开了这个元素的有效交互区域, 或者这个元素已经被从文档中移除. 需要注意的是, 如果这个元素在触摸过程中被移除, 这个事件仍然会指向它, 但是不会再冒泡这个事件到 <code>window</code> 或 <code>document</code> 对象. 因此, 如果有元素在触摸过程中可能被移除, 最佳实践是将触摸事件的监听器绑定到这个元素本身, 防止元素被移除后, 无法再从它的上一级元素上侦测到从该元素冒泡的事件. <strong>只读属性.</strong></dd>
</dl>
<h2 id=".E6.8E.A5.E8.A7.A6.E9.9D.A2">接触面</h2>
<p>{{ domxref("Touch.radiusX") }}, {{ domxref("Touch.radiusY") }}, 和 {{ domxref("Touch.rotationAngle") }} 描述了用户和触摸平面的接触面. 这在面向非精确触摸设备(由手指直接操作的触摸屏)开发时非常有用. 这些值描述了一个尽可能接近实际接触面(例如用户的指尖)的椭圆.</p>
<dl>
</dl>
<h2 id=".E7.A4.BA.E4.BE.8B">示例</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=".E7.9B.B8.E5.85.B3.E9.93.BE.E6.8E.A5">相关链接</h2>
<ul>
  <li><a href="/en/DOM/Touch_events" title="en/DOM/Touch events">Touch events</a></li>
  <li>{{ domxref("Touch") }}</li>
  <li>{{ domxref("TouchList") }}</li>
  <li>{{ domxref("TouchEvent") }}</li>
  <li><a href="http://stackoverflow.com/questions/6073505/what-is-the-difference-between-screenx-y-clientx-y-and-pagex-y" title="the-difference-between-screenx-y-clientx-y-and-pagex-y">screenx-y clientx-y 和 pagex-y 的区别</a></li>
</ul>
<h2 id=".E6.A0.87.E5.87.86.E5.AE.9A.E4.B9.89">标准定义</h2>
<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>
恢复到这个版本