vantguarde

IE10のタッチイベントってなんだろう

DOM | 00:18

IE10のスタンドアローンなPPかベータだしてよ！

さて、Keynoteを見てて、“Touch First”だとか言ってるしIE10でもタッチイベントなデモをやってておーって思ったんですが、どんなイベントを実装してるのかが気になりました。

W3CだとTouch Eventsなんて仕様がありますが、これはマルチタッチ（ジェスチャーって言えばいいのかな？）に対応してません。なのでそれをサポートしてたとしても足りないわけです。IE10のデモだとうりうりと画面を何本かの指で押してた感じなので、何かしらそういう仕組みがあるはず。なんだろう。

って、デモが公開されてるんだから、それを見ればいいんですね。ごそごそ。

ありました。http://ie.microsoft.com/testdrive/Graphics/TouchEffects/Demo.jsの66行目から。

// Determine correct events to register for
if(navigator.msPointerEnabled) {
    downevent = "MSPointerDown";
    upevent = "MSPointerUp";
    moveevent = "MSPointerMove";
    document.addEventListener("MSPointerCancel", function(e){ removeTouchPoint(e); }, false);
    document.addEventListener("MSGestureInit", function(e){ e.preventManipulation(); }, false);
    document.addEventListener("MSGestureHold", function(e){ e.preventDefault(); }, false);
}
else {
    downevent = "mousedown";
    upevent = "mouseup";
    moveevent = "mousemove";
}

navigator.msPointerEnabledという妙なプロパティでサポートを検知してますね。イベントは確認できる範囲で6つ。

• MSPointerDown
• MSPointerUp
• MSPointerMove
• MSPointerCancel
• MSGestureInit
• MSGestureHold

mouseでもなくtouchでもなくpointerと。マウスイベントも同じイベントをimplementしてるとかそういうモデルになってるんでしょうか。WebKitのtouchstartなどをサポートしなければならないはめになったりしないんだろうかとも思ったりしますが、どうなのでしょうね。

このpointerというの、Win8でも共通の概念なんですよねえきっと。さっぱりわからんちんです。ただ、タッチ/非タッチなものでtouchstart, mousedownとふたつのイベントを書く必要がないのは楽かなと。

2011-09-22 追記:

IEBlogにまさにこれを扱った記事が投稿されました。

• Touch Input for IE10 and Metro style Apps

g:subtech:id:mayukiさんのコメント(ありがとうございます！)にもあるとおり、mouse, touch, penを含めた抽象的な形式を"pointer"と呼んでいるようです。event.pointerTypeで形式もとれるようですが。

あとズームやパンを禁止するのに–ms-content-zooming: noneなんてプロパティがありますね。metaのuser-scalableよりは扱いやすい気はしますが、ここらへんもっと良い感じにできないかしら。