現時点でIEのみ実装されてるPointer Eventsが超便利

マウスとタッチで同じ動きをしてほしい場合、それぞれマウスイベントだと『mousedown』、タッチイベントだと『touchstart』と指定しなければいけないうえに、座標の取得方法も異なってわずらわしいと思うことがあります。

例えば、以前作成したcanvasを使ったお絵描き投稿システムでは座標の取得するのに下記のように記述しています。

$('#mycanvas').on('touchstart mousedown', function(e){
    thisX = e.pageX || e.originalEvent.changedTouches[0].pageX;
    thisY = e.pageY || e.originalEvent.changedTouches[0].pageY;
})

どうせ同じことをやるなら共通のイベントがあればいいのにと思っていたのですが、先日、モダンWeb ―新しいWebプラットフォームの基盤技術を読んで、『Pointer Events』という指やマウスやスタイラスなどのポインタイベントを共通して適用可能なイベントがあることを知りました。
参考：マウス・タッチ・ペンのタッチ操作イベント｜Web制作 W3G
参考：ポインターイベントの更新 (Windows)

このイベントを使うと、先ほどのコードは下記のように変更することができます。

$('#mycanvas').on('pointerdown', function(e){  
    thisX = e.originalEvent.pageX;
    thisY = e.originalEvent.pageY;
})

以下、実行サンプル。
canvasを使ったお絵描き投稿システム(現在はIE11のみ対応)

ただ、自分はタッチパネル付きのWindows7 PCのIE11で試してみたのですが、デフォルトの挙動が発生してしまうことがあります(前に作ったお絵描きシステムはデフォルトの挙動は発生せず)。e.preventDefault()を呼ぶだけでなく、CSSで『touch-action : none ;』の指定をしても同じです。Windows8やタブレット端末だとまた違うかもしれません。

なお、試してはいないのですが、下記のGitHubで公開されているJavaScriptライブラリを使うことにより、IE以外のブラウザでも同じことができるそうです。
toolkitchen/PointerEvents