1. 序論
~INFORMATIVE~touch入力を供する端末~上で稼働する~UAは、~web~appを利用するとき,概して、利用者が対話的~web~appに~accessできるようにするため,入力を~mouse~eventに解釈した結果を利用する。 しかしながら、このように解釈され,物理的~touch入力に基づいて正規化された~dataを伴う~eventでは、意図される利用者~体験に十分近付けるには限界がある。 加えて,装置~能力に関わらず、[ ~system~levelの限界, および旧来の互換性 ]に関する~mouse~eventの拘束があるため、複数の同時的な入力【すなわち,複touch】を取扱うことも,可能0でない。 ◎ User Agents that run on terminals which provide touch input to use web applications typically use interpreted mouse events to allow users to access interactive web applications. However, these interpreted events, being normalized data based on the physical touch input, tend to have limitations on delivering the intended user experience. Additionally, it is not possible to handle concurrent input regardless of device capability, due to constraints of mouse events: both system level limitations and legacy compatibility.
その一方、~native~appは,~systemから供される API により,両~事例を取扱える能力を有する。 ◎ Meanwhile, native applications are capable of handling both cases with the provided system APIs.
この仕様は、~web~appが,能力を有する装置に対し[ ~touch~event, 複数の`触点$ ]を直に取扱えるようにする~interfaceを仕様化して、上述の問題に対する解決策を供する。 ◎ The Touch Events specification provides a solution to this problem by specifying interfaces to allow web applications to directly handle touch events, and multiple touch points for capable devices.
2. 適合性
【 以下、この節, および次節の他の内容は W3C 日本語訳 共通ページ に委譲 】
この仕様への適合性の判定基準が適用されるのは、この仕様の~interfaceを実装する `~UA@ のみである。 ◎ This specification defines conformance criteria that apply to a single product: the user agent that implements the interfaces that it contains. ◎ WindowProxy is defined in [HTML5].
WebIDL への適合性
適合~UAは、この仕様の この IDL 片の 適合 ECMAScript 実装 になってい~MUSTが、次の例外は除く: ◎ A conforming user agent must also be a conforming ECMAScript implementation of this IDL fragments in this specification, with the following exception:
- WebIDL の IDL 属性~節 では、 IDL 属性は, ~interface~prototype~obj 上の~accessor~propとして反映される ことが要求されている。 この代わりに,~UAは、 IDL 属性を[ 関連の~interfaceを実装する~platform~obj上の~data~prop ]として反映してよい。 これらの~data~propに対する[ 被~取得-時/被~設定-時 ]の挙動は、その~platform~obj上の~accessor~propの[ 取得子/設定子 ]を呼出したときに露になる挙動と同じで~MUST。 ◎ section 4.4.6 of Web IDL requires that IDL attributes are reflected as accessor properties on interface prototype objects. Instead of this, the user agent may reflect IDL attributes as data properties on the platform objects that implement the relevant interface. These data properties must have the same behavior when getting and setting as would be exhibited when invoking the getter and setter of the accessor properties on the platform object.
注記: IDL 属性を いずれの仕方で反映しても、単純に~platform~obj上の~propを[ 取得する/設定する ]ものとして働けるようにする。 例えば,所与の `Touch$I ~obj %aTouch に対し %aTouch.`target^m が評価されたときは、その `Touch$I ~objに対する `EventTarget$I を返すことになる。 ~UAが IDL 属性を~accessor~propとして実装する場合、~propへの~accessは, `EventTarget$I を返す取得子を呼出す。 ~UAが IDL 属性を[ ~accessor~propにて見出されるものと同じ挙動を伴うような,~platform~obj上の~data~prop ]として実装する場合、その~objは,自前の[ 名前 `target^m, 値 `EventTarget$I ~obj ]にされた~propを持つように現れ、その~propへの~accessは,この値を返すことになる。 ◎ Note: Both ways of reflecting IDL attributes allow for simply getting and setting the property on the platform object to work. For example, given a Touch object aTouch, evaluating aTouch.target would return the EventTarget for the Touch object. If the user agent implements IDL attributes as accessor properties, then the property access invokes the getter which returns the EventTarget. If the user agent implements IDL attributes as data properties on the platform object with the same behavior as would be found with the accessor properties, then the object would appear to have an own property named target whose value is an EventTarget object, and the property access would return this value.
3. `Touch^I ~interface
この~interfaceは、~touch~eventを成す個々の`触点$を~~表現する。 `Touch$I ~objは変異-不能であり、作成-後に,その属性が変化しては~MUST_NOT。 ◎ This interface describes an individual touch point for a touch event. Touch objects are immutable; after one is created, its attributes must not change.
enum `TouchType$I { `direct$l, `stylus$l }; dictionary `TouchInit@I { required long `identifier^m; required `EventTarget$I `target^m; double `clientX^m = 0; double `clientY^m = 0; double `screenX^m = 0; double `screenY^m = 0; double `pageX^m = 0; double `pageY^m = 0; float `radiusX^m = 0; float `radiusY^m = 0; float `rotationAngle^m = 0; float `force^m = 0; double `altitudeAngle^m = 0; double `azimuthAngle^m = 0; `TouchType$I `touchType^m = "direct"; }; [Constructor(`TouchInit$I %touchInitDict), Exposed=Window] interface `Touch@I { readonly attribute long `identifier$m; readonly attribute `EventTarget$I `target$m; readonly attribute double `screenX$m; readonly attribute double `screenY$m; readonly attribute double `clientX$m; readonly attribute double `clientY$m; readonly attribute double `pageX$m; readonly attribute double `pageY$m; readonly attribute float `radiusX$m; readonly attribute float `radiusY$m; readonly attribute float `rotationAngle$m; readonly attribute float `force$m; readonly attribute float `altitudeAngle$m; readonly attribute float `azimuthAngle$m; readonly attribute `TouchType$I `touchType$m; };
- long `identifier@m
- この`触点$を識別する整数。 各`触点$には、`作動中$になった時点で,他のどの`作動中の触点$とも異なる識別子があてがわれ~MUST。 触点が`作動中$であり続ける間は、それを参照0するすべての~eventに,同じ識別子があてがわれ~MUST。 ◎ An identification number for each touch point. ◎ When a touch point becomes active, it must be assigned an identifier that is distinct from any other active touch point. While the touch point remains active, all events that refer to it must assign it the same identifier.
- `EventTarget$I `target@m
- 触面~上に当の`触点$が触面~上に最初に生じた所の `EventTarget$I — `触点$がその時点から当の要素の対話域の外側に動かされたとしても。 ◎ The EventTarget 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.
- 注記: 一部の実装には、粗い入力の不精確さを正すために,~target要素を改めるものもある。 したがって,~target要素は、~eventの座標に直にある要素になるとは限らない。 粗い入力を[ ~targetする/一義化する ]ために利用される手法は、この仕様の視野~外である。 ◎ Some implementations alter the target element to correct for the imprecision of coarse input. Therefore, the target element may not necessarily be the element directly at the coordinates of the event. The methods used to target/disambiguate coarse input are out of scope for this specification.
- double `screenX@m
- double `screenY@m
- 順に、~screenに相対的な,`触点$の[ 横方向, 縦方向 ]座標(`~pixel単位$) ◎ The horizontal coordinate of point relative to the screen in pixels ◎ The vertical coordinate of point relative to the screen in pixels
- double `clientX@m
- double `clientY@m
- 順に、`触点$の,~scroll~offsetは含まない, 表示域に相対的な[ 横方向, 縦方向 ]座標(`~pixel単位$)。 ◎ The horizontal coordinate of point relative to the viewport in pixels, excluding any scroll offset ◎ The vertical coordinate of point relative to the viewport in pixels, excluding any scroll offset
- double `pageX@m
- double `pageY@m
- 順に、`触点$の,~scroll~offsetも含む, 表示域に相対的な[ 横方向, 縦方向 ]座標(`~pixel単位$) ◎ The horizontal coordinate of point relative to the viewport in pixels, including any scroll offset ◎ The vertical coordinate of point relative to the viewport in pixels, including any scroll offset
- float `radiusX@m
- float `radiusY@m
- 順に、[ ~touchしている領域(例:指, ~stylus)に外接する最小の楕円 ]の[ X 軸, Y 軸 ]半径(`~pixel単位$) — ここで、楕円の `rotationAngle$m 方向の半径が,楕円の X 軸~半径と見なされる。 ~touch装置がこの領域を感知し得ない場合は 0 になる。 値は負になっては~MUST_NOT。 ◎ The radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis indicated by rotationAngle, in CSS pixels (as defined by [CSS-VALUES]) of the same scale as screenX; 0 if no value is known. The value must not be negative. ◎ The radius of the ellipse which most closely circumscribes the touching area (e.g. finger, stylus) along the axis perpendicular to that indicated by rotationAngle, in CSS pixels (as defined by [CSS-VALUES]) of the same scale as screenY; 0 if no value is known. The value must not be negative.
- float `rotationAngle@m
- 表示域の X 軸から,時計回りに[ ~touchしている領域に外接する最小の楕円 ]の半径までの角度(~degree単位)。 値は 0° 以上かつ 90° 未満で~MUST — すなわち、角度を測る楕円の半径は,角度がこの範囲に入るように選ばれる。 ~touch装置が角度を感知し得ない場合は 0 になる。 ◎ The angle (in degrees) that the ellipse described by radiusX and radiusY is rotated clockwise about its center; 0 if no value is known. The value must be greater than or equal to 0 and less than 90.
- 楕円が真円の場合、この属性は~~意味を持たない — その場合、~UAは,許容される範囲~内のどの値を利用しても~MAY(例えば~UAは、唐突な変化を避けるために,以前の~touch~eventの `rotationAngle$m 値を利用して~MAY)。 ◎ If the ellipse described by radiusX and radiusY is circular, then rotationAngle has no effect. The user agent may use 0 as the value in this case, or it may use any other value in the allowed range. (For example, the user agent may use the rotationAngle value from the previous touch event, to avoid sudden changes.)
- float `force@m
- 範囲[ 0 〜 1 ]に正規化された,感知された押圧~値。 0 は押圧なし, 1 は[ ~touch装置が感知し得る最高~levelの押圧 ]を表す。 既知の値が無ければ 0 になる。 押圧を感知し得る環境において,この属性が表現している~~物理的な押圧, および 押圧~levelの感度は、様々になり得る。 ◎ force of type float, readonly ◎ A relative value of pressure applied, in the range 0 to 1, where 0 is no pressure, and 1 is the highest level of pressure the touch device is capable of sensing; 0 if no value is known. In environments where force is known, the absolute pressure represented by the force attribute, and the sensitivity in levels of pressure, may vary.
- float `altitudeAngle@m
- ~stylusの仰角を表す,範囲[ 0 (面に平行) 〜 π/2 (面に垂直) ]の値(~radian単位)。 この~propを~supportしない装置に対しては、値 0 が利用されるべきである。 ◎ The altitude (in radians) of a stylus, in the range 0 (parallel to the surface) to π/2 (perpendicular to the surface). The value 0 should be used for devices which do not support this property.
- float `azimuthAngle@m
- ~stylusの方位角を表す,範囲[ 0 〜 2π ]の値(~radian単位)。 値[ 0/ π/2 ]は、 ~stylusの~capが[ `screenX^m / `screenY^m ]値が増大する方向を指していることを表現する。 この~propを~supportしない装置に対しては、値 0 が利用されるべきである。 ◎ The azimuth angle (in radians) of a stylus, in the range 0 to 2π. 0 represents a stylus whose cap is pointing in the direction of increasing screenX values. π/2 represents a stylus whose cap is pointing in the direction of increasing screenY values. The value 0 should be used for devices which do not support this property.
- `TouchType$I `touchType@m
- ~touchを誘発している装置の型を表す。 ◎ The type of device used to trigger the touch.
-
可能な~touch入力の型は、次に挙げる `TouchType@I 列挙~値で表現される: ◎ An enumeration representing the different types of possible touch input.
- `direct@l
- 指による~screenへの直接的な~touch。 ◎ A direct touch from a finger on the screen.
- `stylus@l
- ~stylusまたは~pen装置による~touch。 ◎ A touch from a stylus or pen device.
4. `TouchList^I ~interface
この~interfaceは、~touch~eventを成す個々の接点からなる~listを定義する。 `TouchList$I ~objは変異-不能であり,作成-後にその内容が変化しては~MUST_NOT。 ◎ This interface defines a list of individual points of contact for a touch event. TouchList objects are immutable; after one is created, its contents must not change.
`TouchList$I ~objが`~supportする~prop~index$ `WEBIDL$r は、 0 以上 ~listの長さ未満とする。 ◎ A TouchList object's supported property indices ([WEBIDL]) are the numbers in the range 0 to one less than the length of the list.
interface `TouchList@I { readonly attribute unsigned long `length$m; getter Touch? `item$m(unsigned long %index); };
- unsigned long `length@m
- ~list内の `Touch$I ~objの個数を返す。 ◎ Returns the number of Touch objects in the list
- getter `Touch$I? `item@m(%index)
- ~list内の指定された~indexに~~位置する `Touch$I ~objを返す。 ~indexが~listの長さ以上の場合は ~NULL を返す。 ◎ Returns the Touch at the specified index in the list or null if the index is not less than the length of the list.
5. `TouchEvent^I ~interface
この~interfaceは、[
`touchstart$et,
`touchend$et,
`touchmove$et,
`touchcancel$et
]~event型を定義する。
`TouchEvent$I ~objは変異-不能であり、作成され初期化された後は その どの属性も
変化しては~MUST_NOT。
`TouchEvent$I は、
`DOM-LEVEL-3-EVENTS^r `UIEVENTS$r
に定義される `UIEvent$I ~interfaceを継承する。
◎
This interface defines the touchstart, touchend, touchmove, and touchcancel event types. TouchEvent objects are immutable; after one is created and initialized, its attributes must not change. TouchEvent inherits from the UIEvent interface defined in [DOM-LEVEL-3-EVENTS].
`TouchEventInit$I 辞書~型は、
`TouchEvent$I ~interfaceの構築子に利用され,
~trustedでない(合成) ~touch~eventを構築する仕組みを供する。
それは、
`DOM-LEVEL-3-EVENTS^r `UIEVENTS$r
に定義される `EventModifierInit$I 辞書~型を継承する。
~eventを構築する手続きは `DOM4$r に定義される。
見本~code例
にて、~trustedでない~touch~eventを発火する方法を説明する。
◎
The TouchEventInit dictionary is used by the TouchEvent interface's constructor to provide a mechanism by which to construct untrusted (synthetic) touch events. It inherits from the EventModifierInit dictionary defined in [DOM-LEVEL-3-EVENTS]. The steps for constructing an event are defined in [DOM4]. See the example for sample code demonstrating how to fire an untrusted touch event.
dictionary `TouchEventInit@I : `EventModifierInit$I { sequence<Touch> `touches$m = []; sequence<Touch> `targetTouches$m = []; sequence<Touch> `changedTouches$m = []; }; [Constructor(DOMString %type, optional `TouchEventInit$I %eventInitDict), Exposed=Window] interface `TouchEvent@I : `UIEvent$I { readonly attribute `TouchList$I `touches$m; readonly attribute `TouchList$I `targetTouches$m; readonly attribute `TouchList$I `changedTouches$m; readonly attribute boolean `altKey$m; readonly attribute boolean `metaKey$m; readonly attribute boolean `ctrlKey$m; readonly attribute boolean `shiftKey$m; };
- `TouchList$I `touches@m
- 現在~触面に~touchしている各~接点に対応する `Touch$I ~objからなる~list。 ◎ A list of Touch objects for every point of contact currently touching the surface.
- `TouchList$I `targetTouches@m
- `touches$m 内の `Touch$I ~objのうち,[ `Touch.target$m ~EQ 現在の~event標的(すなわち,この~event~objの `target^m ) ]なるものからなる~list。 ◎ A list of Touch objects for every point of contact that is touching the surface and started on the element that is the target of the current event.
- `TouchList$I `changedTouches@m
-
`touches$m 内の `Touch$I ~objのうち,[ ~event型(すなわち,この~event~objの `type^m )に応じて,次に該当する`触点$ ]に対応するものからなる~list:
- `touchstart$et
- 現在の~eventにより`作動中$になった`触点$。
- `touchmove$et
- 最後の~eventから動いた`触点$。
- `touchend$et
- `touchcancel$et
- 直前に触面から除去された`触点$ — その座標は、除去される直前におけるものとする。
- boolean `altKey@m
- boolean `metaKey@m
- boolean `ctrlKey@m
- boolean `shiftKey@m
- これらの属性の挙動は、 `KeyboardEvent$I `UIEvents$r の同~名の属性と同じである。 ◎ altKey ◎ true if the alt (Alternate) key modifier is activated; otherwise false ◎ metaKey ◎ true if the meta (Meta) key modifier is activated; otherwise false. On some platforms this attribute may map to a differently-named key modifier. ◎ ctrlKey ◎ true if the ctrl (Control) key modifier is activated; otherwise false ◎ shiftKey ◎ true if the shift (Shift) key modifier is activated; otherwise false
注記: 一部の~UAは、 `TouchEvent$I ~interfaceの一部として `initTouchEvent()^m ~methodを実装する。 この~methodが可用であれば、~scriptは `TouchEvent$I ~objの各種~propを初期化できる — `TouchList$I ~propも含め( `createTouchList()$m から返される値で初期化できる)。 `initTouchEvent()^m ~methodは、その~signatureが~UA間で全く互換でないので,標準~化されていない。 よって、 `TouchEvent$I 構築子に取代された。 ◎ Some user agents implement an initTouchEvent method as part of the TouchEvent interface. When this method is available, scripts can use it to initialize the properties of a TouchEvent object, including its TouchList properties (which can be initialized with values returned from Document.createTouchList). The initTouchEvent method is not standardized because the signature varies between user agents in completely incompatible ways. It is superseded by the TouchEvent constructor.
5.1. `TouchEvent^I 実装者に向けての注記
~INFORMATIVE注記: ~UAは、[ 所与の `TouchEvent$I から可用な `Touch$I ~obj ]すべてが, `TouchEvent$I の配送-先と同じ文書に結付けられることを確保するべきである。 これを実装するためには、~UAは,最初の~touchに対し、それが生じた所の標的~文書(以下, %D と記す)を,現在の “~touch作動中の文書” として[ `作動中の触点$すべてが解放される ]まで保持した上で、保持している間は:
- すべての `TouchEvent$I は、 %D へ配送する。
- 配送される~eventが包含する各 `Touch!I ~objの `target$m は、 %D 内の DOM 要素のみを参照0する。
- %D の外側から開始される~touchは,まるごと無視する。
5.2. 用例
~INFORMATIVE`TouchEvent$I に定義される異なる `TouchList$I ~member間の関係性を,下の例で~~説明する: ◎ The examples below demonstrate the relations between the different TouchList members defined in a TouchEvent.
5.2.1 `TouchEvent^I の `touches^m, `targetTouches^m 属性
`TouchEvent!I ~interfaceに定義される `touches$m, `targetTouches$m 各~memberの有用性とそれらの関係性を,次の例に説明する。 ◎ This example demonstrates the utility and relations between the touches and targetTouches members defined in the TouchEvent interface. The following code will generate different output based on the number of touch points on the touchable element and the document:
次の~codeは、[ 文書と~touch可能な要素 ]上の`触点$の個数に基づいて,異なる出力を生成する:
<div id='touchable'>この要素は~touch可能。</div> <script> document .getElementById('touchable') .addEventListener('touchstart', function(%ev){ if (%ev.touches.item(0) == %ev.targetTouches.item(0)){ // (A) document.write('~touch~eventにようこそ。'); } if (%ev.touches.length == %ev.targetTouches.length){ // (B) document.write('すべての触点は標的~要素~上にあります。'); } if (%ev.touches.length > 1){ // (C) document.write('複touchも~supportされています。'); } }, false); </script>
- (A) この~codeは、触面に対する最初の~touchが `touchable^l 要素も標的にしている場合には,実行されるべきである。 `targetTouches$m は,触面~全体にわたる~touchたちの部分集合なので、常に[ %ev.`touches.length^m >= %ev.`targetTouches.length^m ]になる。
- (B) `作動中の触点$すべてが `touchable^l 要素~上にある場合、 `TouchList.length$m ~propは同じになるべきである。
- (C) この~codeは、端末が複touchを~supportするときのみ実行される — 単独の~touchのみ~supportする入力~装置~上では,触面~上の接点は一つだけなので。
<div id='touchable'>This element is touchable.</div>
<script>
document.getElementById('touchable').addEventListener('touchstart', function(ev) {
if (ev.touches.item(0) == ev.targetTouches.item(0))
{
/**
* If the first touch on the surface is also targeting the
* "touchable" element, the code below should execute.
* Since targetTouches is a subset of touches which covers the
* entire surface, TouchEvent.touches >= TouchEvents.targetTouches
* is always true.
*/
document.write('Hello Touch Events!');
}
if (ev.touches.length == ev.targetTouches.length)
{
/**
* If all of the active touch points are on the "touchable"
* element, the length properties should be the same.
*/
document.write('All points are on target element')
}
if (ev.touches.length > 1)
{
/**
* On a single touch input device, there can only be one point
* of contact on the surface, so the following code can only
* execute when the terminal supports multiple touches.
*/
document.write('Hello Multiple Touch!');
}
}, false);
</script>
5.2.2 `TouchEvent^I の `changedTouches^m 属性
`changedTouches$m の有用性とその `TouchEvent$I ~interfaceの他の `TouchList$I ~memberとの関係性を,次の例に説明する。 ◎ This example demonstrates the utility of changedTouches and it's relation with the other TouchList members of the TouchEvent interface. The code is a example which triggers whenever a touch point is removed from the defined touchable element:
次の~codeは、~touch可能として定義された要素から`触点$が除去される度に~eventを発火する:
<div id='touchable'>この要素は~touch可能。</div> <script> document .getElementById('touchable') .addEventListener('touchend', function(%ev){ document.write( %ev.changedTouches.length + ' 個の触点が除去されました。' ); document.write( '要素~上には ' + %ev.targetTouches.length + ' 個の触点が残されています。' ); document.write( '文書~上には ' + %ev.touches.length + ' 個の触点が残されています。' ); }, false); </script>
触面に 3 個の`触点$があって、うち 2 個は `touchable^l 要素~上にあり, `touchable^l 要素~内の 1 個の触点が触面から持上げられたとするとき、[ 除去される触点は 1 個 / 要素に残される触点は 1 個 / 文書に残される触点は 2 個 ]になる。
<div id='touchable'>This element is touchable.</div>
<script>
document.getElementById('touchable').addEventListener('touchend', function(ev) {
/**
* Example output when three touch points are on the surface,
* two of them being on the "touchable" element and one point
* in the "touchable" element is lifted from the surface:
*
* Touch points removed: 1
* Touch points left on element: 1
* Touch points left on document: 2
*/
document.write('Touch points removed: ' + ev.changedTouches.length);
document.write('Touch points left on element: ' + ev.targetTouches.length);
document.write('Touch points left on document: ' + ev.touches.length);
}, false);
</script>
5.2.3. ~scriptから合成 `TouchEvent^I を発火する
~scriptから `TouchEvent$I を作成して発火する方法を,次の例に説明する: ◎ This example demonstrates how to create and fire a TouchEvent from script.
if (Touch.length < 1 || TouchEvent.length < 1) throw "TouchEvent 構築子は~supportされていません"; var %touch = new Touch({ identifier: 42, target: document.body, clientX: 200, clientY: 200, screenX: 300, screenY: 300, pageX: 200, pageY: 200, radiusX: 5, radiusY: 5 }); var %touchEvent = new TouchEvent("touchstart", { cancelable: true, bubbles: true, composed: true, touches: [%touch], targetTouches: [%touch], changedTouches: [%touch] }); document.body.dispatchEvent(%touchEvent);
5.3. 各種~touch~eventの一覧
~INFORMATIVEこの仕様に定義される各種 `TouchEvent$I ~event型を,以下に要約する。 これらのどの~eventも、[ `浮上相$を達成する, かつ ~composed~event `WHATWG-DOM$r になる ]べきである。 ◎ The following table provides a summary of the TouchEvent event types defined in this specification. All events should accomplish the bubbling phase. All events should be composed [WHATWG-DOM] events.
~event型 | `取消可?$ | `既定~動作$ | |
---|---|---|---|
`touchstart$et |
いずれの~eventも:
| `文脈依存$ | 未定義 |
`touchend$et | `文脈依存$ | 文脈依存: ~UAは、~mouse&~click~eventを配送してよい | |
`touchmove$et | `文脈依存$ | 未定義 | |
`touchcancel$et | 不可 | なし |
Event Type | Sync / Async | Bubbling phase | Composed | Trusted proximal event target types | DOM interface | Cancelable | Default Action |
---|---|---|---|---|---|---|---|
touchstart | Sync | Yes | Yes | Document, Element | TouchEvent | Varies | undefined |
touchend | Sync | Yes | Yes | Document, Element | TouchEvent | Varies | Varies: user agents may dispatch mouse and click events |
touchmove | Sync | Yes | Yes | Document, Element | TouchEvent | Varies | undefined |
touchcancel | Sync | Yes | Yes | Document, Element | TouchEvent | No | none |
5.4 ~touch~eventの取消~可否
~touch~eventを`取消した$場合、~scrollingは防止-/中断され得る(~script実行と並列的に起こり得る)。 ~scroll処理能を最大にするため、~UAは,~scrollに結付けられている各~touch~eventに対しては,取消されるかどうか見る処理-が済むまで待機しなくともよい。 加えて,そのような~eventを生成する際には、 `cancelable^m 属性を ~F にして,[ `preventDefault()^m を利用して~scrollingを防止-/中断すること ]はできないことを指示するべきである。 他の場合、 `cancelable^m は ~T になる。 ◎ Canceling a touch event can prevent or otherwise interrupt scrolling (which could be happening in parallel with script execution). For maximum scroll performance, a user agent may not wait for each touch event associated with the scroll to be processed to see if it will be canceled. In such cases the user agent should generate touch events whose cancelable property is false, indicating that preventDefault cannot be used to prevent or interrupt scrolling. Otherwise cancelable will be true.
特に,~UAは、当の~eventに対する ~passiveでない~listenerは無いことが観測されたときは、取消~不可の~touch~eventのみを生成してよい。 ◎ In particular, a user agent may generate only uncancelable touch events when it observes that there are no non-passive listeners for the event.
5.5. `touchstart^et ~event
~UAは、[ 利用者が,触面~上に`触点$を生じさせた ]とき,この~event型を配送し~MUST。 ◎ A user agent must dispatch this event type to indicate when the user places a touch point on the touch surface.
この~eventの標的は`要素$で~MUST。 `触点$が~frameの中にある場合、~eventは,その~frameを通して入子にされている`閲覧文脈$内の要素に配送されるべきである。 ◎ The target of this event must be an Element. If the touch point is within a frame, the event should be dispatched to an element in the child browsing context of that frame.
この~eventが`取消され$た場合、同じ`作動中の触点$に結付けられている,どの~touch~eventに対しても,それにより生じる 既定~動作すべてを — ~mouse~eventや~scrollingも含め — 防止するべきである。 ◎ If this event is canceled, it should prevent any default actions caused by any touch events associated with the same active touch point, including mouse events or scrolling.
5.6. `touchend^et ~event
~UAは、[ 利用者が,触面から`触点$を除去した ]とき,この~event型を配送し~MUST。 これには、~drag中に~screenから外れたときなど,`触点$が触面から物理的に離れたときも含まれる。 ◎ A user agent must dispatch this event type to indicate when the user removes a touch point from the touch surface, also including cases where the touch point physically leaves the touch surface, such as being dragged off of the screen.
この~eventの標的は、当の`触点$が触面~上に最初に生じた所の`要素$と同じで~MUST — `触点$がそこから標的~要素の対話域の外側へ動かされたとしても。 ◎ The target of this event must be the same 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 the target element.
【 `touchstart$et が生じてから `touchend$et が生じるまでの間に,~event標的が DOM 木から除去された場合の挙動はどうなる? 】
生じた/除去された各`触点$は、 `TouchEvent$I の:
- `changedTouches$m 属性に含められ~MUST。
- `touches$m / `targetTouches$m 属性には含まれては~MUST_NOT。
この~eventが`取消され$た場合、この~eventを含む~touch~event連列に属するどの~touch~eventも ~clickに解釈されては~MUST_NOT。 ◎ If this event is canceled, any sequence of touch events that includes this event must not be interpreted as a click.
5.7. `touchmove^et ~event
~UAは、[ 利用者が,`触点$を触面~上で動かした ]とき,この~event型を配送し~MUST。 ◎ A user agent must dispatch this event type to indicate when the user moves a touch point along the touch surface.
この~eventの標的は、当の`触点$が触面~上に最初に生じた所の`要素$と同じで~MUST — `触点$がそこから標的~要素の対話域の外側へ動かされたとしても。 ◎ The target of this event must be the same 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 the target element.
~UAが `touchmove$et ~eventを送信する頻度は、実装により定義され,~hardware能力や他の実装の詳細に依存し得ることに注意。 ◎ Note that the rate at which the user agent sends touchmove events is implementation-defined, and may depend on hardware capabilities and other implementation details.
~UAは、[ 同じ`作動中の触点$に結付けられている `touchmove$et ~event ]のうち,`取消され$なかったものが生じた時点までは, `touchmove$et ~eventにより生じる既定~動作を抑止するべきである。 その時点~以降の `touchmove$et ~eventに対し,既定~動作が抑止されるかどうかは、実装に依存する。 ◎ A user agent should suppress the default action caused by any touchmove event until at least one touchmove event associated with the same active touch point is not canceled. Whether the default action is suppressed for touchmove events after at least one touchmove event associated with the same active touch point is not canceled is implementation dependent.
5.8. `touchcancel^et ~event
~UAは、[ `触点$が実装~特有の方式で~~中断された ]とき,この~event型を配送し~MUST。 次の様なときが該当する:
- ~touchを取消すような[ 同期的~event/動作 ]が~UAから生じたとき。
- `触点$が文書~windowの中の[ 利用者~対話を取扱う能力を有するような,文書~域 ]から外へ出たとき(例: ~UAの~native~UIや, 文書~内の~plug-inが管理する区画へ入ったなど)。
~UAは、[ 利用者が,触面に[ 装置または実装にて,格納するよう環境設定されている個数 ]より多い`触点$を生じさせた ]とき,この~event型を配送しても~MAY — この事例では、 `TouchList$I 内の最も早期の `Touch$I ~objから除去されるべきである。
◎ A user agent must dispatch this event type to indicate when a touch point has been disrupted in an implementation-specific manner, such as a synchronous event or action originating from the UA canceling the touch, or the touch point leaving the document window into a non-document area which is capable of handling user interactions (e.g. the UA's native user interface, or an area of the document which is managed by a plug-in). A user agent may also dispatch this event type when the user places more touch points on the touch surface than the device or implementation is configured to store, in which case the earliest Touch object in the TouchList should be removed.この~eventの標的は、当の`触点$が触面~上に最初に生じた所の`要素$と同じで~MUST — `触点$がそこから標的~要素の対話域の外側へ動かされたとしても。 ◎ The target of this event must be the same 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 the target element.
除去された各`触点$は:
- `TouchEvent$I の `changedTouches$m 属性に含められ~MUST。
- `touches$m / `targetTouches$m 属性に含められては~MUST_NOT。
6. ~retarget法
この節では、 “~retargetする手続き” `WHATWG-DOM$r を与える。 ◎ The following section describes retargeting steps, defined in [[!WHATWG-DOM]]. ◎ …
【 “~retargetする手続き” は その仕様から除去された (それに相当する`~touch~target~list$に置換された)ので、この節の内容の和訳は省略する(それに伴い、この仕様も近いうちに更新されるであろう)。 】
7. `GlobalEventHandlers^I ~interfaceに対する拡張
この節では 、 `HTML5$r に定義される既存の `GlobalEventHandlers$I ~interfaceに対する拡張を述べる — ~event~handler登録の便宜のための。 ◎ The following section describes extensions to the existing GlobalEventHandlers interface, defined in [HTML5], to facilitate the event handler registration.
partial interface `GlobalEventHandlers!I { attribute EventHandler `ontouchstart$m; attribute EventHandler `ontouchend$m; attribute EventHandler `ontouchmove$m; attribute EventHandler `ontouchcancel$m; };
- `EventHandler$I `ontouchstart@m
- `EventHandler$I `ontouchend@m
- `EventHandler$I `ontouchmove@m
- `EventHandler$I `ontouchcancel@m
- 順に,[ `touchstart$et, `touchend$et, `touchmove$et, `touchcancel$et ]~event型に対する `~event~handler IDL 属性$( `HTML5$r )。 ◎ ontouchstart ◎ The event handler IDL attribute (see [HTML5]) for the touchstart event type. ◎ ontouchend ◎ The event handler IDL attribute (see [HTML5]) for the touchend event type. ◎ ontouchmove ◎ The event handler IDL attribute (see [HTML5]) for the touchmove event type. ◎ ontouchcancel ◎ The event handler IDL attribute (see [HTML5]) for the touchcancel event type.
8. ~mouse~event / `click^et との相互作用
~UAは、同じ利用者~入力に呼応して
~touch~event, [
~mouse~event
`DOM-LEVEL-2-EVENTS$r `UIEVENTS$r
]の両者を(~touch用に設計されていない~web内容との互換性のために)配送して~MAY。
単独の利用者~動作に対し,この両者とも配送する~UAは、その動作に対するどの~mouse~event型よりも先に `touchstart$et ~event型を配送し~MUST。
[
`touchstart$et,
`touchmove$et,
`touchend$et
]のいずれかが`取消され$た場合、~UAは,~touch~eventに伴って生じることになる どの~mouse~eventも配送するべきでない。
◎
The user agent may dispatch both touch events and (for compatibility with web content not designed for touch) mouse events [DOM-LEVEL-2-EVENTS] in response to the same user input. If the user agent dispatches both touch events and mouse events in response to a single user action, then the touchstart event type must be dispatched before any mouse event types for that action. If touchstart, touchmove, or touchend are canceled, the user agent should not dispatch any mouse event that would be a consequential result of the prevented touch event.
~touch~eventを処理できる~Web~appは、その~eventを`取消す$こともできる — その場合、~UAは,対応する~mouse~eventを配送する必要はない。 特に~touch入力~装置~用に書かれてはいない~Web~appは、代わりに後続の~mouse~eventに反応することになる。 ◎ If a Web application can process touch events, it can cancel the events, and no corresponding mouse events would need to be dispatched by the user agent. If the Web application is not specifically written for touch input devices, it will react to the subsequent mouse events instead.
~UAは、概して,(~tapや長押しの様な)一本指による作動化~gestureのみに対し[ ~mouse/~click ]~eventを配送することになる。 触点の動きや複touchによる対話を孕むような~gesture — 複数の`作動中の触点$を孕むような複touch — は、通例的に,~touch~eventのみを生成することになる。 ◎ User agents will typically dispatch mouse and click events only for single-finger activation gestures (like tap and long press). Gestures involving movement of the touch point or multi-touch interactions – with two or more active touch points – will usually only generate touch events.
ある~touch~event連列を~tap~gestureとして解釈する~UAは、[ `mousemove$et, `mousedown$et, `mouseup$et, `click$et ]~eventを(この順序で),対応する~touch入力に対する `touchend$et ~eventの標的に配送するべきである。 ~touch~event処理の間に文書の内容が変化した場合、~UAはそれらの~mouse~eventを~touch~eventと異なる標的へ配送して~MAY。 ◎ If the user agent interprets a sequence of touch events as a tap gesture, then it should dispatch mousemove, mousedown, mouseup, and click events (in that order) at the location of the touchend event for the corresponding touch input. If the contents of the document have changed during processing of the touch events, then the user agent may dispatch the mouse events to a different target than the touch events.
[ ~touch/~mouse ]~eventによる,更なる既定~動作の順序は、他所で指定されない限り,実装により定義される。 ◎ The default actions and ordering of any further touch and mouse events are implementation-defined, except as specified elsewhere.
要素の作動化(例: 一部の実装における~tap)は、概して,次の~event連列を生産することになる(これは、~UA特有の挙動に依存して,多少変わり得るが): ◎ The activation of an element (e.g., in some implementations, a tap) would typically produce the following event sequence (though this may vary slightly, depending on specific user agent behavior):
- `touchstart$et
- ~zero回以上の `touchmove$et ~event(回数は指の動きに依存する) ◎ Zero or more touchmove events, depending on movement of the finger
- `touchend$et
- `mousemove$et (~mouse特有の旧来の~codeとの互換性のため) ◎ mousemove (for compatibility with legacy mouse-specific code)
- `mousedown$et
- `mouseup$et
- `click$et
上の~~過程で[ `touchstart$et, `touchmove$et, `touchend$et ]~eventのいずれかが`取消され$た場合、[ ~mouse/~click ]~eventは,発火されないことになり、結果の~event連列は単純に次の様になるであろう: ◎ If, however, either the touchstart, touchmove or touchend event has been canceled during this interaction, no mouse or click events will be fired, and the resulting sequence of events would simply be:
- `touchstart$et
- ~zero回~以上の `touchmove$et ~event(回数は指の動きに依存する) ◎ Zero or more touchmove events, depending on movement of the finger
- `touchend$et
~UAが Touch Event を~supportするとしても、利用者に可用な入力の仕組みは,~touchscreenだけとは限らない。 特に、~touchが可能化されている~laptopや, 伝統的に “~touchのみ” の機器(携帯電話や~tablet)に外部~入力~装置が~~装着されている事例では、利用者は,~touchscreenに加えて, ~trackpad, ~mouseや~keyboard — 以下,~mouse等と略記する — を利用することもある。 この理由から,開発者は、~event~listenerを排他的に “~touchか~mouse等のどちらか” に束縛するのは避けるべきである — そうすると,~siteや~appは ~touch以外を受け付けなくなり、利用者は他の入力の仕組みを利用できなくなるので。 ◎ Even if a user agent supports Touch Events, this does not necessarily mean that a touchscreen is the only input mechanism available to users. Particularly in the case of touch-enabled laptops, or traditional "touch only" devices (such as phones and tablets) with paired external input devices, users may use the touchscreen in conjunction with a trackpad, mouse or keyboard. For this reason, developers should avoid binding event listeners with "either touch or mouse/keyboard" conditional code, as this results in sites/application that become touch-exclusive, preventing users from being able to use any other input mechanism.
/* ~eventを排他的に “~touch, または~mouse等” に束縛する~code — これは行わないこと — そうすると、機器が~touch, ~mouse等の両者を備えていても、~touch以外を受け付けなくなるので: ◎ conditional "touch OR mouse/keyboard" event binding DON'T DO THIS, as it makes interactions touch-exclusive on devices that have both touch and mouse/keyboard */ if ('ontouchstart' in window) { /* ~touchに対する~event~listenerを設定しておく ◎ set up event listeners for touch */ target.addEventListener('touchend', ...); ... } else { /* ~mouse等に対する~event~listenerを設定しておく ◎ set up event listeners for mouse/keyboard */ target.addEventListener('click', ...); ... }
開発者は代わりに,入力を同時並行的に取扱う形にするべきである。 ◎ Instead, developers should handle different forms of input concurrently.
/* ~eventを,同時並行的に “~touch, および~mouse等” に束縛する~code: ◎ concurrent "touch AND mouse/keyboard" event binding */ /* ~touchに対する~event~listenerを設定しておく ◎ set up event listeners for touch */ target.addEventListener('touchend', function(e) { /* 互換性~mouse~eventや~clickは防止する ◎ prevent compatibility mouse events and click */ e.preventDefault(); ... }); ... /* ~mouse等に対する~event~listenerを設定しておく ◎ set up event listeners for mouse/keyboard */ target.addEventListener('click', ...); ...
~touchに対し,同じやりとりを重ねて処理する( ~touch~eventに対し一回, 互換性~mouse~eventに対し一回)のを避けるため、開発者は, ~touch~eventを必ず取消して ~mouse/~click ~eventが更に生成されないようにするべきである。 あるいは、~mouse~eventが~touch~eventから生成されたものかどうかを検出する仕方もある — InputDeviceCapabilities API を見よ。 ◎ To avoid processing the same interaction twice for touch (once for the touch event, and once for the compatibility mouse events), developers should make sure to cancel the touch event, suppressing the generation of any further mouse or click events. Alternatively, see the InputDeviceCapabilities API for a way to detect mouse events that were generated as a result of touch events.
9. 用語集
- `作動中の触点@
- 現在 ~screen上にあって, かつ ~UAが追跡している`触点$。 `触点$は、~UAが[ その出現を指示する `touchstart$et ~eventを最初に配送し始める時点 ]から,[ 触点が,触面から除去されたか, 最早~追跡されなくなったことを指示する[ `touchend$et / `touchcancel$et ]~eventを配送し終えた時点 ]まで、`作動中$とされる。 ◎ A touch point which is currently on the screen and is being tracked by the user agent. The touch point becomes active when the user agent first dispatches a touchstart event indicating its appearance. It ceases to be active after the user agent dispatches a touchend or touchcancel event indicating that the touch point is removed from the surface or no longer tracked.
- `触面@
- ~touch入力を感知する物理的な面。
- `触点@
- 装置~interfaceの触面に,~pointer(例:指や~stylusなど)が接する所の座標。 これを適用し得るのは、~touch~screenに~touchしている指や, 紙片上で書いている~digital~penである。 ◎ The coordinate point at which a pointer (e.g finger or stylus) intersects the target surface of an interface. This may apply to a finger touching a touch-screen, or an digital pen writing on a piece of paper.
- `取消された~event@
- [ `preventDefault()^m ~event~handlerにて ~F を返す, その他の手段 ]により、既定~動作が防止された~event。 `UIEVENTS$r `HTML5$r ◎ An event whose default action was prevented by means of preventDefault(), returning false in an event handler, or other means as defined by [DOM-LEVEL-3-EVENTS] and [HTML5].
10. 課題
~INFORMATIVEworking group は この仕様に対する open issues の~list を保守している。 これらの課題は、この仕様の将来の改訂にて取組まれるであろう。 ◎ The working group maintains a list of open issues in this specification. These issues may be addressed in future revisions of the specification.
A. 旧来の~event初期化子
この節の特色機能は廃用にされた。 旧来の~softwareとの互換性を要する~UAにおいてのみ実装されるべきである。 ◎ The following features are obsolete and should only be implemented by user agents that require compatibility with legacy software.
A.1. `Document^I ~interfaceに対する拡張
`Document!I ~interface `DOM4$r は、作者が `Touch$I / `TouchList$I ~objを作成できる~methodを包含する。 ◎ The Document interface [DOM-LEVEL-3-CORE] contains methods by which the user can create Touch and TouchList objects.
`createTouch()$m は、 `Touch$I 構築子に取代された。 ◎ Document.createTouch is superseded by the Touch constructor.
`createTouchList()$m は、~zero個以上の `Touch$I ~objからなる `TouchList$I ~objを作成する。 `createTouchList()$m は、 `TouchEvent$I 構築子に直に `Touch$I ~obj連列を渡すことに取代された。 ◎ Document.createTouchList creates a TouchList object consisting of zero or more Touch objects. Document.createTouchList is superseded by passing sequences of Touch objects directly to the TouchEvent constructor.
partial interface `Document!I { // この仕様により廃用にされた `Touch$I `createTouch@m( `WindowProxy$I %view, `EventTarget$I %target, long %identifier, double %pageX, double %pageY, double %screenX, double %screenY ); // この仕様により廃用にされた `TouchList$I `createTouchList@m(`Touch$I... %touches); };
謝辞
~INFORMATIVEこの仕様の基礎に利用されている~modelを開発した WebKit 技術者たちに: WebKit ~touch~eventを要約された Neil Roberts 氏 (SitePen), 提言を寄せられた Peter-Paul Koch 氏 (PPK), ReSpec.js 仕様~著作tool を開発された Robin Berjon 氏。 多くの貢献を寄せられた WebEvents WG に。 ◎ Many thanks to the WebKit engineers for developing the model used as a basis for this spec, Neil Roberts (SitePen) for his summary of WebKit touch events, Peter-Paul Koch (PPK) for his write-ups and suggestions, Robin Berjon for developing the ReSpec.js spec authoring tool, and the WebEvents WG for their many contributions.
仕様の開発に伴い、~commentを寄せられ,安定した改善点へ導いた,他の多くの方々に:
Many others have made additional comments as the spec developed, which have led to steady improvements. Among them are Matthew Schinckel, Andrew Grieve, Cathy Chan, Boris Zbarsky and Patrick H. Lauke. If we inadvertently omitted your name, please let me know.
この仕様の~test-suiteに協力された次の方々に:
The group acknowledges the following contributors to this specification's test suite: Matt Brubeck, Olli Pettay, Art Barstow, Cathy Chan and Rick Byers.
最後の発行からの変更点
~INFORMATIVEこの節では、 2013 年 10 月 10 日付 勧告 が発行されて以降の,主要な変更点を要約する。 全部的な commit 履歴 も用意されている。 ◎ This is a summary of the major changes made since the 10 October 2013 Recommendation was published. Full commit history is also available.
- `force$m 属性を `Touch$I に追加した。 `303b36e1d188a380f9bc0861b175438e596a34b1^commit ◎ Added force attribute to Touch (commit)
- `radiusX$m, `radiusY$m 属性を `Touch$I に追加した。 `6d222fb7f106273bef847ad1d1d7a23569841954^commit ◎ Added radiusX and radiusY attributes to Touch (commit)
- `rotationAngle$m 属性を `Touch$I に追加した。 `487f6815a9590b72779d4820ff43c2b58d798f92^commit ◎ Added rotationAngle attribute to Touch (commit)
- 座標を long 型から double 型に昇格した。 `006274ffada14de504f731afdb5ec1581ff327ca^commit ◎ Upgraded co-ordinates to double type instead of long (commit)
- `preventDefault()^m に対する `touchmove$et の挙動を更新した `df620100e48111cf7a30592f344606f8c8b7fe22^commit ◎ Update touchmove behavior on preventDefault (commit)
- `touchend$et ~eventの取消した場合の効果を明確化した。 `54a3d1668c4f727d9c6f6d729b28a036041e301f^commit ◎ Clarify effect of canceling touchend event (commit)
- `TouchEvent$I, `Touch$I に構築子を追加した。 `219546b80cd148543a5ece656d81ba3c901d2106^commit ◎ Add constructor for TouchEvent and Touch (commit)
- 旧来の~event初期化子 `initTouchEvent()^m を追加した。 `50f51ccacb0d5ad06f9cf6ed44f853d6a3616d10^commit ◎ Added legacy event initializer initTouchEvent (commit)
- ~touch~eventの取消~可否用の~supportを追加した。 加えて、~scroll処理能による含意について述べた。 `59^pull ◎ Added support for uncancelable touch events and described scroll performance implications.
- すべての~eventについて, “~composed” になるべきものと指示した。 `67^pull ◎ Indicate that all events should be "composed".
- `TouchEvent$I を~retargetする手続きを追加した。 `73^pull ◎ Added TouchEvent's retargeting steps
- `touchType^m, `altitudeAngle^m, `azimuthAngle^m を追加した( Safari iOS 10.3 による,~stylus用の拡張)。 `81^pull ◎ Add touchType, altitudeAngle, azimuthAngle (Safari iOS 10.3 extensions for stylus)
- 構築子に [Exposed=Window] を追加した。 `88^pull ◎ Add [Exposed=Window] to Constructor
- ~touch~targetを調整する~UAもあることについての注記を追加した。 `95$pull ◎ Add note to mention UA might adjusting touch target