FC2ブログ
WEBアプリケーション研究室 開発ノート TOP

WEBアプリケーション研究室 開発ノート [iPhone]javascriptのtouchendイベントがおかしい。

スマートフォン向けのjavascriptを書いていてちょっとはまったので書いておきます。
クリックしたらただalertを出すだけの簡単なスクリプトです。
マークアップが


UPPER

LOWER

こんな感じでjavascriptが

document.getElementById("upper_button").addEventListener("touchend", function(e){
alert("upper");
}, false);

document.getElementById("lower_button").addEventListener("touchend", function(e){
alert("lower");
}, false);
こんな感じです。

androidは大丈夫でしたがiPhone(4.3.4)ではボタンを交互に押したとき、前のイベントが実行されてしまいます。

問題はalertを出していることです。touchendとalertが干渉しているみたいです。
こういう時のおまじない

document.getElementById("upper_button").addEventListener("touchend", function(e){
setTimeout(function(){ alert("upper"); }, 0);

}, false);

document.getElementById("lower_button").addEventListener("touchend", function(e){
setTimeout(function(){ alert("lower"); }, 0);
}, false);
setTimeoutを使うと、touchendの処理を待ってから、alertを呼んでくれます。timeoutは0でOKです。
スポンサーサイト



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