• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

2018年2月23日

  • このエントリーをはてなブックマークに追加

こんにちは、Webプログラマの篠田です。

多くのサイトで、レスポンシブ対応をされていると思います。

その際に、アコーディオンを利用したコンテンツの見せ方もよく見かけます。

そんな、レスポンシブ対応アコーディオン実装時の罠についてご紹介します。

この記事の目次

  • 1 スマホで「クリックイベント」が、うまく動かない罠
  • 2 スマホは「タッチイベント」で動かす
  • 3 タッチデバイスか非タッチデバイスの判別
  • 4 スクロールとタッチイベントの衝突
  • 5 タッチデバイスでのスクロールの回避方法
  • 6 まとめ
  • 7 告知

スマホで「クリックイベント」が、うまく動かない罠

パソコン用Webサイトで、アコーディオンを実装する場合の下記のようにjQueryを記述します。

JavaScript
1
2
3
4
5
6
7
<script type="text/javascript">
    $(function(){
     $(document).on('click','セレクタ名',function(){
     #アコーディオン処理
     });
    });
</script>

アコーディオンに関わらず、「クリックイベント」を利用して、何らかの処理を行うことが一般的です。

ですが、スマホで同様の処理を動かそうとすると、うまく動かなかったり、タップしてからアコーディオンが動くまでにタイムラグが発生して動作がぎこちなくなるという現象が発生します。

スマホは「タッチイベント」で動かす

スマホにもクリックイベントは有効ですが、クリックイベントよりも素早く動作するのが「タッチイベント」です。

「タッチイベント」は下記のように記述します。

JavaScript
1
2
3
4
5
6
7
<script type="text/javascript">
    $(function(){
     $(document).on('touchend','セレクタ名',function(){
     #アコーディオン処理
     });
    });
</script>

「クリックイベント」では、「click」だったところが「タッチイベント」では「touchend」となります。

「touchend」は「タッチされた後、指を画面から話した時に発生」するイベントを取得して、反応します。

「タッチイベント」は、非タッチデバイス(普通のPC)では反応しませんので、動作しません。

かと言って、「クリックイベント」用と「タッチイベント」用の2種類の処理を記述するのは面倒な上に、タッチデバイスでも「クリックイベント」は認識しますので、2重動作する危険性があります。

タッチデバイスか非タッチデバイスの判別

柔軟な処理としては、タッチデバイスか非タッチデバイスかを判定して、それに応じたイベントを設定するのが望ましいです。

判定する方法は、下記のようなコードを利用します。

JavaScript
1
var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');

「ontouchstartプロパティ」の有無をみて、タッチデバイスか非タッチデバイスか判定することができます。

これを、先程のコードとあわせると、下記のようになります。

JavaScript
1
2
3
4
5
6
7
8
9
<script type="text/javascript">
    $(function(){
     var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');
 
     $(document).on(clickEventType,'セレクタ名',function(){
     #アコーディオン処理
     });
    });
</script>

スクロールとタッチイベントの衝突

先程のコードで動いてくれれば、良かったのですが残念ながら思ったとおりの動作はしません。

理由は、タッチデバイスでの「スクロール」にあります。

「スクロール」もタッチデバイス上では「タッチしてから動かし、離す」という動作をします。
これが「touchend」の実行条件になり、「タッチイベント」が動作してしまいます。

タッチデバイスでのスクロールの回避方法

いろいろと方法があるのですが、個人的に分かりやすかったものをご紹介します。

ずばり、「スクロール中は、イベントを実行しない!」と言うものです。

具体的なコードは下記のようになります。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
    $(function(){
     var $isScrolling = 0 ;
        var $timeoutId ;
        
        $(document).on( "scroll", function () {
         $isScrolling = 1 ;
 
            // スクロールを停止して200ms後に終了とする
            clearTimeout( $timeoutId );
 
            $timeoutId = setTimeout( function () {
             $isScrolling = 0 ;
            }, 200 );
       });
    });
    
    var clickEventType = (( window.ontouchstart!==null ) ? 'click':'touchend');
 
    $(document).on(clickEventType,'セレクタ名',function(){
     //スクロールしていないときに、クリックorタッチイベントを実行する
     if ($isScrolling === 0) {
     #アコーディオン処理
     }
    });
 
</script>

このように、「スクロールイベント」を取得してフラグ処理を行い、スクロールしてる間は「タッチイベント」を実行しないとすることで、スクロールとタッチイベントの衝突を回避することができるようになります。

まとめ

1つのHTMLで、スマホとパソコンを同時に処理するレスポンシブ対応独特の問題点をご紹介しました。

「クリックイベント」で、何か動作がおかしいなぁと感じた時は「タッチイベント」を試してみると、うまく解決するかもしれません。

告知

2018年3月9日(金)に、社内セミナー「ALAKI ◯◯ Lab」を開催します。
今回は、広く外部の方も参加できる形式で開催します。

テーマは「非エンジニアでも使いこなせる正規表現の基礎」です。

「Connpass」で受付を行っておりますので、ご興味のある方は、是非ご参加ください。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • python-logo-master-v3-TM

    Web制作時に高解像度の元画像がない場合にPythonで高画質化する方法

    25 1月, 2023

  • 20140213000044 0

    Node.jsでリアルタイムWebを実現

    7 8月, 2014

  • laravel_js

    Laravel Mix使用時にJavascriptの関数が未定義(not found)になるときの対処法

    2 12月, 2022

デザイナー募集
プログラマー募集
  • Next story Webサイトに動きを!グリッチエフェクトを実装する「CSS Glitch Effect」
  • Previous story 第4回「ALAKI ◯◯Lab」を2018年3月9日(金)に開催します!

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.