hoverをスマホでも動作するように実装したメモ

スマホでもタップした感を出すためにhoverを実装して欲しいと要望を受けたのですが、
疑似要素の:hoverではタップして変化した後、元に戻らなかったり思うような動作にならず…
色々調べた結果、なんとか納得のいく形になったのでスニペット的にメモを残します。

最終的に取った方法としては下記のような感じです。

• PCもスマホも、擬似クラス:hoverは使用しない。
• hoverの効果を付けたいhtmlの要素のclassにtouch-hoverを付けておく。
• .touch-hoverに対してjQueryで
  • touchstartとmouseoverのイベント時にclassにhoverを付与する。
  • touchendとtouchmoveとmouseoutとclickのイベント時にclassからhoverを削除する。

コード

$("body").on({
  "touchstart": function() {
    return $(this).off("mouseover mouseout");
  },
  "touchstart mouseover": function() {
    return $(this).addClass("hover");
  },
  "touchend touchmove mouseout click": function() {
    return $(this).removeClass("hover");
  }
}, ".touch-hover");

あとはCSSで対象の.hoverにhover時のスタイルを適用すれば良いはずです。

補足

• タッチした時にマウスのイベントも呼ばれているらしく、それを回避するためにtouchstartのイベントでmouseoverとmouseoutのイベントを削除しています。
• bodyに対してイベントを登録しているのは、.touch-hoverを持った要素が動的に追加されることがあったので、それらにもイベントを登録するためにこのような記述にしています。
• touchmoveでもhoverを解除しているのは、スクロールしたときにhover状態で指に追従してくるのがなんかイヤだったためです。
• clickでもhoverを解除しているのは、タッチしてその位置から移動する要素があった時に、hoverが残ってしまうことがあったためです。このあたりは無理矢理感があります…

参考にさせていただいたサイト
http://uenomemo.sakura.ne.jp/pcmemo/767