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

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

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

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

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

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

<a href="#home" id="setting_ok">設定を保存</a>
$('#setting_ok').click(function(evt){
    ...(何らかの処理)...
});

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

うーん…どうしてでしょう?

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

リンクをjavascriptで無効にして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;
});

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

このページをシェアする

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

2010-04-04