iPhoneのclickイベントの挙動
本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。
iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。
<p class="target">ターゲット</p>
このようなHTMLにclickイベントをバインドしていきます。
まずは次のようなコード。
$(".target").click(function(){
$(this).css("background","red");
});
これはちゃんと動きます。
次のコード。
$(".target").on("click",function(){
$(this).css("background","red");
});
これもちゃんと動きます。
これを踏まえた上で次からが動かないコード。以下の現象はiOS4、iOS5、iOS6で確認できます。
$(document).on("click",".target",function(){
$(this).css("background","red");
});
$("body").on("click",".target",function(){
$(this).css("background","red");
});
はい、動きませんね。Androidではちゃんと動きます。
ハック的な方法を利用すればこれらのコードを動かすことができます。
ひとつは要素に対してなんでもよいからclickイベントを指定しておく。これで動きます。
$(".target").on("click",function(){});
$("body").on("click",".target",function(){
$(this).css("background","red");
});
ただ、この方法だとliveメソッド的にonメソッドは使えません。おすすめは次の方法。
cssでcoursor:pointerを指定する。これでも動作します。
.target{
coursor:pointer;
}
iPhoneだけでclickイベントが動作しない場合にはお試しアレ。
関連エントリー
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
iOS6でtransitionアニメーションが少し遅れて開始する問題
スマートフォンとposition:fixedのバグ
Android4.0とiframe
スポンサードリンク
«jQueryオブジェクトとは? | メイン | 「やさしくはじめるWebデザイナーのためのjQueryの学校」が発売されました»