モバイルにて商品拡大画像を閉じたときの問題

[mai]

宜しくお願いいたします。

現在の環境は下記の通りです。
WordPress のバージョン：4.9.8
Welcart のバージョン：1.9.13
Welcart専用の拡張プラグイン：
ご利用のテーマ：welcart_basic(子テーマ)
症状を確認したブラウザ：chrome
サーバー：（会社名、サービス名）xserver
SSLの利用：（独自　常時SSL）

モバイル(iphone)で商品画像を拡大して、閉じるボタンをタッチすると、下層のにあった基の画面のメニューボタンをタッチした様になりメニュー画面に移行します。
ボタンの位置を右端から50px程移動しても、少し下にスクロールしていれば、画像の上に閉じるボタンがある状態になり、閉じるボタンを押すと拡大画像は消えますが、同時に下にある画像をタッチすることになり、無限ループになってしまいます。

そこで、初心者からの提案で間違っているかも知れませんが、
１．閉じるボタンが押されたら、下のレイヤーのタッチイベントを無効化する。
２．拡大画像を閉じる。
３．タイマーセットにて0.5秒程度してタッチイベントの無効化を解除する。

0.5から1秒程度タッチを受け付けなければ、上記の問題は解決しそうに思うのですが、バッファーにタッチイベントが残っている場合はできないかも知れません。素人の考えなのでお許しを。

しかし、この問題は多くの方が悩まれていると思います。第一画像を大きくしてスライドで対応されているサイトも見かけました。モバイルファーストに考えるなら上記の問題は解決しなければなりません。

どうか解決策をアドバイス下さいますようお願いいたします。

[mai]

自己(事故?)解決かも知れません。
現在検証中です。

[n_slider]

初めまして、当方も全く同じ現象で苦しんでいます。
androidの標準ブラウザでも同じ挙動を確認しています、
良い解決策がありましたら是非ご教示ください。

[mai]

n_sliderさんへ

どのような環境下なのか不明ですが、私と同じのテーマ：welcart_basicにて運用されているものとして答えます。

画像を拡大する機能は、
親テーマのfunction.phpに下記の様にjsファイルを読み込みされています。
wp_enqueue_script( ‘swipebox’, $template_dir . ‘/js/jquery.swipebox.min.js’, array(), ‘1.4.1’);

welcart_basicのjsディレクトリーにある二つのファイルを変更することになります。その為に前もってオリジナルファイルのバックアップとておいてください。
jquery.swipebox.min.jsとjquery.swipebox.jsの二つのファイルです。

jquery.swipebox.min.jsは、jquery.swipebox.jsファイルをminfy化したもので機能は全く同じ物です。ただエディターで開いてもチンプンカンプンです。
そこで、jquery.swipebox.jsをエディターで開き587行目ぐらいにある下記の内容を変更致しました。

$( ‘#swipebox-close’ ).bind( action, function( event ) {
event.preventDefault();//今回追加しました。(実行したイベントをキャンセル)
event.stopPropagation();//今回追加しました。(親要素への伝播をキャンセル)
$this.closeSlide();
} );
上記の2行を追加して上書きをしました。

少し上の$( ‘#swipebox-next’ ).bind( action, function( event ) {・・・
においては設定しているのにcloseにおいては設定されていません。不思議です。

このjquery.swipebox.jsをminfy化して、新しくjquery.swipebox.min.jsとして上書きをしました。minfy化に付いてはgoogle先生にお尋ねください。

jquery.swipebox.min.jsをftpにより転送をすれば解決できると思います。
上記の方法が正しいかどうかは解りません。
現在検証中です。上記の内容は海外のQ&Aのサイトにも同様の事例があったので大丈夫とおもいますが・・・。
自己責任においてご利用ください。

当初の親レイヤーのタッチイベントを無効化する方法は試していません。

[nanbu]

こんにちは mai さん

情報ありがとうございます。
こちらでも確認してみたいと思います。
ちなみに検証に使われた iphone の型番を教えていただいてよろしいでしょうか。

[mai]

nanbu 様

返信が遅くなりごめんなさい。
私はiphone6にて試しました。
Google Chromeのデベロッパーツールでも同様の現象が起こっていたと思います。
現在もiphone 6/7/8 Xモードにて、私のサイトでははありませんが、画面右上のメニューの上に画像レイヤーの「Ｘ」が重なっているサイトにて、「Ｘ」にて閉じるとタッチイベントが親要素への伝播しています。拡大画像レイヤーが閉じると同時にメニュー画面が表示しているサイトがございます。
上記の書き込みでも、androidの標準ブラウザでも同様の現象が起こっている様です。

ひとつ疑問に思っていることがあります。上記の様にコードを書き込み致しましたが、正しいコードかどうか解らず、検証中との記載と自己責任での使用との書き込みを致しましたが、この様なコード書き込みは貴フォーラムの利用基準に違反していないか少し不安を持ちつつ投稿いたしました。違反していたら削除して下さい。

色々試しながら問題を解決されている方のお気持ちは私も理解できるので、少し不安を持ちながらも今回は投稿いたしました。

[投稿者]

投稿