仮想マウスイベントとは

「仮想」マウスイベントとは、マウスとタッチ両方のイベントを抽象的に同様に扱うためにつくられました。これにより、開発者は mousedown, mousemove, mouseup, click のような基本的なマウスイベントにリスナーを登録できます。そしてプラグインは、このリスナーをデバイスごとに適切な、最も早く発行されるイベントに対して登録します。タッチ環境下では、通常のマウス環境におけるイベントの発生順を保つようにされています。たとえば vmouseup は常に vmousedown より後に発生します。そして vmousedown は vclick より先に発生するというような具合です。また仮想マウスイベントは、イベント内での情報抽出も標準化しています。そのためタッチ環境であっても、イベントオブジェクトから pageX, pageY, screenX, screenY, clientX, clientY などのプロパティが参照可能です。

注意：vclickについて

タッチデバイスで vclick を使うには、注意が必要です。Webkitベースのブラウザでは touchend イベントが発行されてから、およそ300ミリ秒ほど遅れて mousedown, mouseup, click イベントが発生します。仮想マウスイベントは、イベントの発行された時間とタッチイベントの発生した場所を計算するようにしています。異なった計算式が、デバイス毎に、あるいは同じデバイスでもOSのバージョン毎に、必要となる場合があります。このため、最初にタッチイベントが発生した要素と、実際に仮想マウスイベントがターゲットとした要素は異なっている場合があります。

タッチスクリーンでタップによりコンテンツが変化し、ポイントした位置に異なった要素が来てしまうようなケースでは、vclickではなく click イベントを使うようお勧めします。これはたとえばページ遷移や開閉式のコンテンツ、コンテンツが完全に置き換わってしまうような場合です。

要素の挙動をキャンセルする

アプリケーションは preventDefault() を vclick イベント内で呼び出すことで、クリックによるデフォルトの挙動をキャンセルさせることができます。マウスベースのデバイスでは、vclick内での preventDefault() の呼び出しは、バブリングフェーズで行われているために実際の click イベントで preventDefault() を呼んだのと全く等価です。タッチパネル環境においては、話はもう少し複雑です。実際の click イベントは、vclick イベントが発生してから約300ミリ秒後に発生します。そのため vclick イベント内で呼ばれた preventDefault() は vmouse プラグイン内で保留され、次の click イベントを捕まえ、そこへ preventDefault() と stopPropagation() を発行するようになります。前の注意書きにもあるように、発火タイミングの遅延により、時に click と vclick で対象要素の不一致を引き起こす場合があります。このため、vmouse プラグインは click イベントの対象要素を特定しようと試みます。しかしそれでも、上手くいかないケースがあります。それはクリックイベント内でデフォルトのアクションが発火されている場合や、ポイントにあったコンテンツが既に移動されたり入れ替えられたりしている場合、他の要素からクリックイベントが呼ばれた場合などです。こうした要素の不一致が起きてしまっている場合、click イベントを用いるのが良いでしょう。