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

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

スポンサーサイト

-------- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

スマートフォン向けの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です。
スポンサーサイト

    このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。