2012年5月31日 JavaScript

スマホでマウスオーバー

スマートフォン（以下スマホ）やタブレットでPCでいうところのマウスオーバー処理をしたいときは、touchイベントを使うことで実現できる。
確かAndroid1.6とかでtouchイベントに対応していない端末があったような気がするが、touchイベントに対応しているか判別すればいいわけで、デバイスがPCだろうがスマホだろうがタブレットだろうが関係ない。

実装イメージ

touchイベントを認識するか？

しない→clickイベントで処理（マウスオーバーは普通にCSSで）

する→clickフラグ用の変数を用意。

タップした（ontouchstart）ときに見た目を変えるCSSやclass名をセットする。
タップしたところから移動（ontouchmove）したら、clickフラグを無効に。
タップを離した（ontouchend）とき、
1. タップしたときにセットしたCSSやclass名を取り消す。
2. clickフラグが有効であれば、処理。
3. clickフラグを有効に再セット

ポイントは、タップ（クリック）したかどうかを判別するフラグを用意するところです。
クリックと同様の処理をするために、タップしたところからタップしたまま移動したらクリックしていないことにしています。

サンプル

それでは、スマホでマウスオーバーベーシック版のサンプルです。

html

<a id="test">これはテスト</a>

CSS

#test {
  display: block;
  padding: 20px;
  background: #eee;
  cursor: pointer;
}

#test.protected {
  background: #666;
}

JavaScript

function test(e) {
  e.innerHTML = ('this is test' == e.innerHTML)? 'これはテスト': 'this is test';
  return false;
}

var flag_link = true;
var a = document.getElementById('test');

if ("object" == typeof document.documentElement.ontouchend) {
  a.ontouchstart = function () {
    a.className = 'protected';
  }
  a.ontouchmove = function () {
    flag_link = false;
  }
  a.ontouchend = function () {
    a.className = '';
    if (flag_link) {
      test(a);
    }
    flag_link = true;
  }
} else {
  a.onclick = function () {
    test(a);
  }
}

さらにjQueryを使えば、ソースがシンプルになってカスタマイズがラクになります。

スマホでマウスオーバー jQuery版

JavaScript

function test(e) {
  var v = ('this is test' == $('a').html())? 'これはテスト': 'this is test';
  
  e.html(v);
  return false;
}

var flag_link = true;
var a = $('#test');

if ("object" == typeof document.documentElement.ontouchend) {
  a
  .bind("touchstart", function () {
    $(this).addClass('protected');
  })
  .bind("touchmove", function () {
    flag_link = false;
  })
  .bind("touchend", function () {
    $(this).removeClass('protected');
    
    if (flag_link) {
      test($(this));
    }
    
    flag_link = true;
  });
} else {
  a.click(function () {
    test($(this));
  });
}