あなたの androidブラウザでは touchstart イベントをスルーして click イベントが起こりませんか？

 

例によって、

Parllet（個人で作成・公開しているアルファ版のWeb家計簿）

の開発作業中に起こった内容についての記事になります。

（レスポンシブWebデザイン導入計画シリーズとしてはこの回の続きに当たります。）

 

スポンサードリンク

 

 

ざっくり環境

Android：2.3.3（HTC Desire HD 001HT）

 

この回までで実装していたスライドメニュー（Animated Border Menus を好き勝手いじって作成）

ですが、私のAndroidでちょっとおかしな状態になりました。

通常は、メニューボタンをタップすると普通にスライドメニューが開きます。

 

しかし、何かの拍子に次の現象が。

メニューボタンをタップしてもスライドメニューが現れず、

ボタンはクリックされた時のような枠と色が付き、

URL末尾にはページ内リンクの "#" が追加されています。

 

何度も試したところ、私の場合は5回に1回ぐらいこの症状が出ました。

 

スライドメニュータップ時の動きはこの回に変更したソースの中の

        trigger.bind(eventtype, function(ev) {
            ev.stopPropagation();
            ev.preventDefault();
           
            if (menu.hasClass('bt-menu-open')) {
                resetMenu();
            } else {
                menu.removeClass('bt-menu-close');
                menu.addClass('bt-menu-open');
            }
        });

の部分に当たるので、そこが反応していないことになる。

eventtype は

eventtype = mobilecheck() ? 'touchstart' : 'click',

と宣言しており、

PCなら click 、スマホなら 'touchstart'

になるように切り替えている。

今回は Android なので、何かの拍子に touchstart イベントが発動せず、

にもかかわらず click イベントが発動してしまったと仮定すると、上記の症状の説明もつきます。

（まあ、Android のバグなんだろうけど。）

 

仮定を裏付けるためにも、eventtype の宣言を以下のように修正。

eventtype = mobilecheck() ? 'touchstart click' : 'click',

touchstart イベントが発動しなかったとしても click イベントで拾うようにする。

 

修正後に試してみたが、メニューボタンは必ず開き、URL末尾に "#" が追加されることもなくなった。

 

ちなみに5回に1回ぐらいはメニューボタンにクリックされた時のような枠と色が付き、

その直後にスライドメニューが開きました。

以下のスナップショットはその瞬間を捉えた画像と、直後のスライドメニューが開ききった後の画像です。

 

これでメニューボタンにクリックされた時のような枠と色が付いた時でも

click イベントで救えていることの裏付けにもなったかと思います。

 

Android のタッチ時の挙動がおかしいことがあったら、

click イベントでの救済も試してみると良いかもしれません。

 

タグ：公開アプリ Parllet jQuery 技術 体当たり