レスポンシブWebデザイン導入中の不具合対応（Parllet の場合 iPhoneでのjQuery live(click, ...) －１ ） [公開アプリ]
※ 注意！ このエントリは ブログラミング（ブログを書きながらプログラミング）です。筆者がポストした時には気づいていない誤り等が後から発覚する恐れがあります。（過去の事例：2014年 1/4
の誤りに 1/9 に気づいて訂正、等 ^^; ）
sakashushu です。
Parllet（個人で作成・公開しているアルファ版のWeb家計簿） のレスポンシブWebデザイン導入中の不具合対応シリーズ。
また新たな不具合が出てまいりました・・・。
不具合対応シリーズにして大正解という、予想が当たっても微妙に嬉しくないパターンですが、気にしてないフリしてどんどん体当たりのブログラミング（ブログを書きながらプログラミング） を行って参ります。
スポンサードリンク
■ ざっくり環境
OS：Windows 7 Home Premium
Play Flamework：1.2.4
スマホ：iphone4
Github公開リポジトリ のCommitバージョン（スタート時点）：こちら
■ 寄り道（読み飛ばし推奨）
上記の ■ ざっくり環境 を見てピクッと来たあなたは凄い！
スマホが iphone4 になってますね～。
これは妻が１年ぐらい前まで使っていたものなんです。（プラン名忘れたけどsoftbankで機種変更の際に、古い方のiphoneの番号を変えて、他の家族名義にして無料で使えるやつ）
憶えていらっしゃる方はいますでしょうか。
妻は Parllet（パレット） についての唯一の相談役なんでございます。
レスポンシブWebデザイン導入シリーズの記念すべき１回目に以下のように書いておりました。
そしてここで、Parllet（パレット）
すると、
妻：「開くんじゃなくて下に飛んじゃうんだ。」
という感想が。
何を言っているかというと、ブラウザの幅をスマホサイズにした時（スマホのスタイル）の動きのことで。
スマホのスタイルでは、ヘッダー部分のリンク（"Parllet とは" 等）が消え、代わりに右端に "＋" の文字のリンクが表示されます。
そして "＋" をクリックするとフッター部分に現れたリンク（"Parllet とは" 等）まで飛びます。
普段 iphone を使用している妻は、"＋" を押すとFacebookやGoogle＋のようなスライドメニューが開くと思ったのです。（スマホでのブラウザの動きというよりは、「スマホのアプリってこういう動きだよね」的な感想だったと思われます。）
via: レスポンシブWebデザイン導入計画（Parllet の場合 その１）
レスポンシブWebデザイン導入シリーズに時間が掛かったため相談役（妻）への相談も久しぶり。
動作確認ということで妻所有の iphone5 で開発環境のParllet（パレット）を見てもらいました。
するとすぐに不具合が・・・。
不具合は古い方の iphone4 でも同様だったので、そちらで私が確認しながら対応することになり、今回の ■ ざっくり環境 に iphone4 が登場したという流れになっております。
■ 現状
iphone のsafari での現象です。
スライドメニューが開いた状態で、メニューを閉じるためのエリア（オーバーレイエリア）をタップしても閉じません。
いつものように体当たりで学びながらブログラミング（ブログを書きながらプログラミング）していきます。
■ 体当たり開始
スライドメニューのオーバーレイエリアのイベントは、Parllet/public/javascripts/AnimatedBorderMenus/jquery.borderMenuPrlt.js 内に
jQuery(document).on(eventtype, '#bt-menu div.bt-overlay', function(ev) {
と記述していて、私が気になったのは eventtype です。
eventtype は
// var eventtype = mobilecheck() ? 'touchstart click' : 'click',
var eventtype = 'click',
と、コメントアウトして残しているように、以前はモバイルとそれ以外でイベントを変えていました。
試しにコメントアウトをもとに戻して実施してみます。
var eventtype = mobilecheck() ? 'touchstart click' : 'click',
// var eventtype = 'click',
ほら、いきなり直っちゃった。
しかし、困ったことに eventtype = 'click' としているのには理由があります。
前回までに愛機の Android 4.1.1（freebit mobile PandA）でのスクロールの動きは確認できたんですが、触っている中で問題を見つけました。
大分類（明細表）・小分類（残高明細（口座系））はタップ（PCではクリック）することでスライドメニューが開きますが、スライドメニューが開いた後の外側に当たる位置をタップした場合に、スライドメニューは開いた後すぐに閉じてしまうのです。
赤破線の辺りをタップしても、
スライドメニューは一瞬開いた直後に閉じてしまいます。
via: レスポンシブWebデザイン導入（Parllet の場合 明細表（残高明細）－６）
と、Android でメニューが一瞬開いた直後に閉じるという現象が起きてしまうのです。（しかも腹立たしいことに、今試したところ iphone4 の方ではこの問題は起きません。まさに、あちらを立てればこちらが立たず・・・orz ）
今回は iphone での問題について検索してみます。
jQuery(document).on(... は、 1/6 にも引用した通り jQuery live() を表した on() です。
on() ひとつで bind() live() delegate() を表せる
（中略）
live()
（中略）
これを on() で書くとこうなります。
$(document).on('click', '.foo', function(){...}); $(document).off('click', '.foo');（中略）
via: jQuery の on() と off() を理解する - tacamy memo
ということで「jquery live click iphone」で検索！
jQuery で
などの本来クリックされることを意図していない要素に live で clickイベントハンドラを付けると、iPhone の Mobile Safari で反応してくれない「ことがある」。
$('#an_element').live('click', function() {
// このイベントハンドラが iPhone では安定して呼び出されない
});に onclick="" という意味のない属性を付けると、安定してこれを回避できる。
ららら～ あるいは
- ららら～
とする。
click イベントではなく tap イベントにする。 live() をやめて bind() にする。
via: iPhone で jQuery の live(click, ...) が効かないとき | 3.1415.jp
やはりiphone の Safari で起こってる問題なんですね。
色々と対処法があるようですが・・・。
まず、bind() は廃止になったらしいので却下。
本当は live() を知って調べたんだけど、
via: 【jQuery】on() で イベントをバインドする。 - pospomeのプログラミング日記
これは jQuery 1.9 で廃止になったらしい。
同時に bind() / delegate() も廃止になる。
tap イベントは試したところ効果なし。
私の場合は<li> でなく <div> を使っているので <ul> で囲むのも却下。
ということで、「onclick="" という意味のない属性を付ける」方向性でいこうと思いますが、今回はここまでです。
次回に続きます！
4/6 追記
続きを書きました。
いつも最後まで読んでいただいてありがとうございますm(_ _)m
何度も見に来ていただけることが、間違いなく私の原動力となっています(^_^)
またお越しくださいませませ！
コメント 0