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

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

ただいまの
回答率

90.36%

  • jQuery

    7551questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

jQueryでタップイベントが起動しない

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,176

drunmei1373

score 2

はじめまして。現在スマホ版サイトを制作しているのですが、jQueryでハンバーガーをタップしたときにメニューがshowするようにし、「閉じる」ボタンをタップしたときにメニューがhideするようにしたいのですが、できずに困っております。

on clickでも多少タイムラグがあるものの対応できるようなことがネットに書いてあったのですが、まったく動かず…。
jQuery mobile 1.3.1からモバイルイベント部分のみを取り出したソースをjquery-1.10.2.min.jsにコピペしてtapイベントを書き、サーバーにアップしてみたのですが、まったく反応いたしません。

つたないプログラムでお恥ずかしいのですが、以下のように書いております。

$(function() {
      $(".sp_navigation").hide();
      $("#sp_menu").on('tap', function() {
     $(".sp_navigation").show('fast', function(){

         $(".close").on('tap', function() {
         $(".sp_navigation").hide('fast', function() {
         });
         });
     });
      });
});

内容が間違えているのかと思い、「tap」を「click」にし、ローカルで試したところ問題なくクリックにてイベントが発生いたしましたので、id、class名間違いはなさそうです。

本当に初歩的な質問で心苦しいのですが、アドバイスをいただければ幸いです。

何卒宜しくお願い申し上げます。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/05/10 15:50

    質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

回答 2

+1

 Touch Events

「tapイベント」はどこから引っ張ってきました?
(2017/05/10 16:54追記。質問者の補足で jQuery Mobile の独自拡張イベントと判明)

 tap event (jQuery Mobile)

 原因の切り分け

現状、原因不明の為、下記手順で切り分けしてください。

  • 現象を再現可能な最小限のソースになるまでソースコードを切り出す(他の余計なHTML/CSS/JavaScriptを削除する)
  • 「モバイルイベント処理の部分のみを抜き出したもの」ではなく、jQuery Mobileそのものを使用して確認する
  • jquery関連jsファイルの読み込み順に問題がないか確かめる(jquery.jsを読み込む前にjQueryコードを書いていたり、jquery.jsを読み込む前にjquery-mobile.jsを読み込んでないか)
  • 下記コードを実行して、どのイベントがタップ時に反応するのか切り分ける
function handleEvent (event) { alert(event.type); }
jQuery(document).on('click', handleEvemt);
jQuery(document).on('tap', handleEvemt);
jQuery(document).on('touchstart', handleEvemt);

Re: drunmei1373 さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/10 15:57

    お世話になっております。
    http://moroya.hatenablog.jp/entry/2013/05/06/122013
    の記事を見てjQuery mobileを
    https://gist.github.com/moroya/5450697#file-jquery-mobile-events-js-L1
    から引っ張ってきました。

    キャンセル

  • 2017/05/10 17:03 編集

    親記事を追記しました。
    ローカル上でclickでは正常動作するとの事ですが、tapイベントの時のサーバ上のファイルと全く同じかどうなのかが気になります。
    サーバ上では本番環境なのでローカルにないコードがいろいろとあるのでは…。
    原因を切り分ける為には最小限のコードである事が重要です。いきなり本番環境にコードを持ってくると、他のコードと干渉しているのか、書いたコードに問題があるのかさえ分かりません。

    キャンセル

  • 2017/05/10 17:06

    ありがとうございます。ちょっとやってみます。

    キャンセル

0

touchstart では?

【touch, click, pointerの実装 - タッチイベントとマウスイベント | CodeGrid】
https://app.codegrid.net/entry/touch-mouse

【TouchEvent - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/TouchEvent

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/05/10 16:15

    お世話になっております。上のURLに私も調べてたどり着き、

    $(function() {
    $(".sp_navigation").hide();
    $("#sp_menu").addEventListenerr('touchstart', function(event) {
    updateEventname('touchstart');
    updateXY(event);
    $(".sp_navigation").show('fast', function(){
    }, false);

    $(".close").addEventListenerr('touchstart', function(event) {
    updateEventname('touchstart');
    updateXY(event);
    $(".sp_navigation").hide('fast', function(){
    }, false);
    });
    });
    });

    と書いてみたのですが、イベントが発生いたしませんでした。それでtapイベントを試してみたのですが、どちらもダメでした。

    キャンセル

  • 2017/05/10 16:38

    上記ページでは問題なくイベントが確認できますよね?
    updateEventname とか updateXY という関数を使っていますが、定義していますか?エラーは出ませんか?

    また、イベントの中でイベントを定義しないほうが良いですよ。

    キャンセル

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

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

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

  • jQuery

    7551questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。