Webの勉強

Web系の作業で得た知識を備忘録として記録。間違ったていたら、ごめんなさい。

マウスイベントとタッチイベント(Window8対応)

前回の記事の通り、Window8のようにタッチイベント・マウスイベントの両方がそなわっているデバイスで、処理を共通化する方法です。

Windows8ChromeFirefoxはタッチイベントをサポートしており、画面をタッチして操作した場合はタッチ系のイベントが、マウスで操作した場合はマウス系のイベントが発火するようになっています。 (※タッチイベントの時は、タッチイベント→マウスイベントの順で両方発火?後述)

そのため、touchstartとmousedownの両方にイベントをバインドしておいて、それらのイベントリスナの中でmoveイベントとendイベントをバインドし、endイベントでリスナを解除する。

See the Pen aLvoyL by satsuki mori (@satsuki) on CodePen.

ポイントは、

タッチ・マウス両方の開始イベントを登録。

$hitarea.on('touchstart mousedown', handleStart); // 両方設定

マウス・タッチの両方のイベントが発生してしまうため、2度目を阻止

event.preventDefault();

開始イベントの種類(event.type)で、マウスかタッチかを判断

  if(eventName === 'touchstart') {
    return {
      move: 'touchmove',
      end: 'touchend'
    };
  }
  if(eventName === 'mousedown') {
    return {
      move: 'mousemove',
      end: 'mouseup'
    };

move,endイベントをバインド

なので、もしマウス操作でバインドした時はタッチ操作はうけつけない。

  $document.on(currentEventNameSet.move, handleMove);
  $document.on(currentEventNameSet.end, handleEnd);

endイベントの発火で、move、endイベントをアンバインド

$document.off(currentEventNameSet.move, handleMove);
$document.off(currentEventNameSet.end, handleEnd);

デフォルトのスワイプ動作をCSSで禁止にするみたいです。

   /* windows8のスワイプ動作を禁止 */
    -ms-touch-action:none;
    touch-action:none;

IE9は使用できず。。 touch-action - CSS | MDN

マウス・タッチイベントの発火順

結局、 ・マウスクリックでも、タッチも両方発火するの?それとも、上に書いた通り、どっちかだけ? ・タッチパネル付PCの場合、どうなる? がよくわからなかった。。試してみたいですね。

参考サイト github.com 参考サイト developer.mozilla.org

IEの場合は、ポインターイベント