iPhoneのclickイベントの挙動

このエントリーをはてなブックマークに追加

本エントリーは軽めのjQuery Advent Calendar 2012最終日のエントリーです。

iPhoneはonメソッドを利用したclickイベントに結構クセがあるのでそれを解説したい思います。

<p class="target">ターゲット</p>

このようなHTMLにclickイベントをバインドしていきます。

まずは次のようなコード。

$(".target").click(function(){
	$(this).css("background","red");
});

sample

これはちゃんと動きます。

次のコード。

$(".target").on("click",function(){
	$(this).css("background","red");
});

これもちゃんと動きます。

sample

これを踏まえた上で次からが動かないコード。以下の現象はiOS4、iOS5、iOS6で確認できます。

$(document).on("click",".target",function(){
	$(this).css("background","red");
});

sample

$("body").on("click",".target",function(){
	$(this).css("background","red");
});

sample

はい、動きませんね。Androidではちゃんと動きます。

ハック的な方法を利用すればこれらのコードを動かすことができます。

ひとつは要素に対してなんでもよいからclickイベントを指定しておく。これで動きます。

$(".target").on("click",function(){});
$("body").on("click",".target",function(){
	$(this).css("background","red");
});

sample

ただ、この方法だとliveメソッド的にonメソッドは使えません。おすすめは次の方法。

cssでcoursor:pointerを指定する。これでも動作します。

.target{
	coursor:pointer;
}

sample

iPhoneだけでclickイベントが動作しない場合にはお試しアレ。

関連エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
jQuery1.8系のanimate()で一部のAndroid端末が落ちる件
iOS6でtransitionアニメーションが少し遅れて開始する問題
スマートフォンとposition:fixedのバグ
Android4.0とiframe

スポンサードリンク

«jQueryオブジェクトとは? | メイン | 「やさしくはじめるWebデザイナーのためのjQueryの学校」が発売されました»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/642
コメント

最後のCSSですが、

coursor:pointer;

ではなく

cursor:pointer;

が正しいようです。

投稿者:asarisan | 2015年1月13日 09:36
コメントを投稿