clickイベントが効かない人への処方箋（iPhone&jQuery）

自分でもはまってしまったのでエントリー。

jQueryを使ってiPhone用のWebアプリケーション制作を行う場合の注意です。

今回はclickイベントを取り上げます。

例として、ここでは「ボタンをタッチしたら設定を保存させる際にclickイベントを利用する」としましょう。

動くようでちゃんと動かない例

<a href="#home" id="setting_ok">設定を保存</a>

$('#setting_ok').click(function(evt){
	...(何らかの処理）...
});

実は、このように書いても軽く画面にタッチした状態ではclickイベントが発生しません。　しっかり、ゆっくりとタッチして離すとclickイベントが発生します。

うーん...どうしてでしょう？

実は、軽いタッチでもリンクは動作します。　つまりタッチによるイベントは発生し、それによるリンクが働いてしまうことにより、clickイベントが無視されてしまうようなのです。

このリンク動作を無くすことができればclickイベントが発生するはずなので、href属性でjavascript:void(0)を割り当てましょう。

<a href="javascript:void(0);" id="setting_ok">設定を保存</a>

そして、その代わりにclickイベントハンドラの中でhrefの処理をやってあげることにします。

$('#setting_ok').click(function(evt){
	...(何らかの処理）...
	location.href = location.href + '#home';
	return false;
});

うん、これでちゃんと動作するようになりました。