jQueryで作ったウェブアプリをiPhoneで実行!
そん時にタップに応じてある要素のclassをtoggleClassさせて、そのある要素をON OFFスイッチみたいに使おうと思ったけど。。。。重い(^^;。。。。。PCだと早いんだけどね。
コード的にはclickでtoggleClassしてるだけ。だからclickをどうにかしなきゃと。
プラグインを入れたもののthisの指す先がおかしくて微妙に使い物にならなかったのでこんな風にしてみました
[js]
$(".switch").bind(‘touchstart’, function() {
$(this).attr("moved","no");
});
$(".switch").bind(‘touchmove’, function() {
$(this).attr("moved","yes");
});
$(".switch").bind(‘touchend’, function() {
if($(this).attr("moved")=="no")$(this).toggleClass("selected");
});
[/js]
クリックは3つのアクションが呼ばれます touchstart -> touchmove -> touchendって順番でね。
touchendされたらtoggleClassって言うふうでもいいんですが、これだと
画面をスクロールする時に.switchを触らないといけない時
指を話した瞬間に.switchをタップされたことにされちゃいます。なので
”タッチ開始からタッチ終了まで動かなかったものをタップとする”としました。
実はタップ位置を動かさない限りtouchmoveは呼ばれないんです。
なのでtouchstartは呼ばれたけどtouchmoveは呼ばれなかったものだけtouchendでtoggleClassする。
するとめっちゃ速くてスクロールでも誤作動しないタップができます。