<divid="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>
<divid="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>
既存のウェブコンテンツは、これらの API の存在をユーザーエージェントがタッチ対応の "モバイル" デバイスであるというシグナルとして使うことが多く、非モバイルデバイス上でこれらの API
を公開すると（たとえタッチ対応であっても）、そのようなウェブコンテンツにとって最適でないユーザー体験を引き起こす可能性があります。
// 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/keyboardif ('ontouchstart'inwindow) {
// set up event listeners for touch
target.addEventListener('touchend', ...);
...
} else {
// set up event listeners for mouse/keyboard
target.addEventListener('click', ...);
...
}
// concurrent "touch AND mouse/keyboard" event binding// set up event listeners for touch
target.addEventListener('touchend', function(e) {
// prevent compatibility mouse events and click
e.preventDefault();
...
});
...
// set up event listeners for mouse/keyboard
target.addEventListener('click', ...);
...
同じインタラクションを二重に処理しないようにするため、開発者は互換性のあるマウスイベントやクリックの生成を抑制するためにタッチイベントを キャンセル することを確認するべきです。あるいは、タッチイベントから生成されたマウスイベントを検出する方法として
InputDeviceCapabilities API
を参照してください。
この仕様の基礎として用いられたモデルの開発に尽力した WebKit のエンジニアの皆様、WebKit のタッチイベントの要約を提供してくれた Neil Roberts（SitePen）、執筆と提案で貢献した
Peter‑Paul Koch（PPK）、ReSpec.js spec
authoring tool を開発した Robin Berjon、そして多くの貢献を行った WebEvents WG に感謝します。
仕様の発展に伴い追加のコメントを寄せてくださった多くの方々にも感謝します。その中には Matthew Schinckel、Andrew Grieve、Cathy Chan、Boris Zbarsky、Patrick
H. Lauke、Simon Pieters が含まれます。もしお名前を誤って省略していたらお知らせください。
