質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

スマートフォンのタップイベントに関して

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,355

score 66

スマートフォンのサイトを制作しているのですが、
タップの制御に関してご教示いただければ幸いです。

jquery初心者のため拙い記述、ご説明でお恥ずかしいのですが、
下記ソースの様に、「.triggerTap」という要素をtouchstartするたびに画像が切り替わるようにしていて、
さらにtouchendするとアコーディオンが開くときは、ボタンがどの状態でも画像が_onがついた画像に切り替わり、閉まるときは、_offがついた画像に切り替わるようにしています。

この時、touchstartとtouchendの操作が重複してしまっているせいだと思うのですが、ボタン画像が切り替わる際に、一瞬切り替わる前の画像が見えてしまいます。

このような時どのような記述をすればよいかで悩んでおります。。。
わかりづらく恐縮ですが、何卒よろしくお願いいたします。

$( '.triggerTap' ).on(
        {
            'touchstart': function() {
                this.isTouch = true;
                var tapImages = $(this).children("img");
                if (!tapImages.hasClass("current") ) {
                    tapImages.attr("src", tapImages.attr("src").replace("_off.", "_on."));
                    tapImages.addClass("current");
                }
                else {
                    tapImages.attr("src", tapImages.attr("src").replace("_on.", "_off."));
                    tapImages.removeClass("current");
                }
            },
            'touchmove': function() {
                this.isTouch = false;
            },
            'touchend': function() {
                if(this.isTouch === true){
                    var tapImages = $(this).children("img");
                    if ($("+.acoCont", this).css("display") === "none") {
                        if (!tapImages.hasClass("current") ) {
                            tapImages.attr("src", tapImages.attr("src").replace("_off.", "_on."));
                            tapImages.addClass("current");
                        }
                        else {
                            tapImages.attr("src", tapImages.attr("src").replace("_on.", "_on."));
                        }
                        $("+.acoCont", this).velocity("slideDown", { duration: 200 });
                    } else {
                        
                        if (!tapImages.hasClass("current") ) {
                            tapImages.attr("src", tapImages.attr("src").replace("_off.", "_off."));
                        }
                        else {
                            tapImages.attr("src", tapImages.attr("src").replace("_on.", "_off."));
                            tapImages.removeClass("current");
                        }
                        $("+.acoCont", this).velocity("slideUp", { duration: 200 });
                    }
                }
            }
        });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

まずtouchmoveイベントがいつ発生するかを勘違いされていませんか?
ご提示コードではtouchmoveは「タッチしている要素から指が出た時」に発生することを期待しているように見えました。
このイベントは、要素内で指が少しでも動いたら、動くたびに何度でも発生するイベントです。

試していませんが、
タッチする → 指を少し動かす(ボタンから外れない程度に) → 指を離す
でアコーディオンがオープンしてくれないのではないでしょうか。

タッチの開始(touchstart)は対象のボタンで拾うのがいいでしょう。
しかし、タッチの終了(touchend)は画面全体どこで離しても拾えるようにしておいて、それが開始した要素と同じなら要素が選択されたと判断し、それ以外の場所であればキャンセルされたと判断するのがいいと思います。

(ここまでの動作ならtouchmoveはなくても行けるような気がします。もし、押したまま隣のボタンに移動した場合に~とかやりたい場合はtouchmoveを使うことになるでしょう。)

実現方法がわからない場合はぜひご返信ください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/08/17 19:42

    ご説明ありがとうございます!
    再度、タッチイベントについて学習しなんとか理解できるようになりました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る