jQueryのhover()のi-Padやi-Phoneでの挙動について

お仕事でFlashで作られたコンテンツをxtml+javascript+cssで再現し、置換する案件がありました。
もちろん、この案件の意図するところは、Flashコンテンツを閲覧できないi-Padやi-Phoneへの対応ということは言うまでもない感じですね。i-Phoneも公式でFlash搭載したらこんな問題も起こらないでしょうにね…。

で、元となるFlashコンテンツは、いわゆる画像スライドショー的なもので、それほど複雑なものでは無かったんですが、i-Padやi-PhoneなどのタッチスクリーンUIならではの部分で若干ハマったのでメモしときます。

今回、i-Pad/i-Phoneのみの対応ではなく、もちろんPCでの閲覧にも対応している必要がありました。その場合、それぞれのデバイス(指とマウス)で大きな違いとなるのが、いわゆるmouseoverとmouseoutです。Flashでいうとことのrolloverとrolloutですね。

そもそも指でタッチするUIのi-Pad/i-Phoneには、マウスポインタが対象物に乗った際に発生するmouseover、マウスポインタが対象物から外れた場合に発生するmouseoutが存在しないわけですな。(いわゆるタッチ操作はclickイベントに相当します。)

で、それに気付づかず、ごくごくフツーにjQueryの hover() 使ってイベント処理してると、i-Padとかでの挙動がおかしくなりました。んで試しにi-Padで hover() 実行した時のイベントの発生を以下のような単純な関数で検証してみました。

$("#hoge").hover(){
  function(){
    alert("mouseOver");  //マウスオーバー時に実行
  },
  function(){
    alert("mouseOut");   //マウスアウト時に実行
  }
}

PCだと、以下の挙動となります。

・マウスポインタが対象に乗る → mouseOver が表示
・マウスポインタが対象から外れる → mouseOut が表示

これについては、難の疑問もなく、ごくごく当たり前の結果です。
で、本題となるタッチインターフェースのi-Pad/i-Phoneは以下の結果となりました。

・対象をタッチ → mouseOut が表示、続けてmouseOver が表示

と、何だかよくわからない結果に、てか何で先にmouseOut?
で、回避策としてUA判別して、i-Pad/i-Phone/i-Podの時は処理を分けることにしました。

var ua =navigator.userAgent; //ユーザエージェント取得
if(ua.indexOf(‘iPhone’) > -1 || ua.indexOf(‘iPad’) > -1 || 
ua.indexOf(‘iPod’) > -1){
 //ここにはi-Phone用の処理を記述
}else{
 //ここにはPC用の処理を記述
}

ひとまず、これでOKでした。

コメントを残す

メールアドレスが公開されることはありません。