jQuery hover()をPCとタッチスクリーンで分ける

touchとhoverの両立

PCで主にWebサイトのGUIを調整していると、スマホなどのタッチスクリーン端末では、違和感が生じたりする。

前に、jQuery 動的に生成した要素へのhover()は使えない - ikapで、

$(document).on("mouseenter", "selector", func);
$(document).on("mouseleave", "selector", func);

を利用した、hoverを作った。しかし、タッチスクリーン端末では１度タッチすると、hover状態になるだけで、もう一度タッチしないと、既定の動作が起こらないという状態になった。

この状況の回避のため、スマホだと反応が遅れる :hover を心地良くする方法 : Sensebahnを参考にした。

参考では、

$(document).on('touchstart mousedown', 'selector', func);
$(document).on('touchend mouseup', 'selector', func);

としているが、mousedownとmouseupでは、自分が想定している動作と異なるので、

// スマホ用hover動作
$(document).on('touchstart',　'selector', func);
$(document).on('touchend', 'selector', func);
// PC用hover動作
$(document).on("mouseenter", "selector", func);
$(document).on("mouseleave", "selector", func);

のように、PCとタッチスクリーンで分けてみたところ、想定の動作をした。

PCでタッチスクリーンを持った端末がないので、その時の動作は知らない^^;