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

Question

はじめまして。現在スマホ版サイトを制作しているのですが、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名間違いはなさそうです。

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

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

Comments

[kei344]

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

Answer 1

Touch Events

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

• マルチタッチ ウェブブラウザ向けの開発 - HTML5 Rocks
• Touch Events — Level 2 （日本語訳）

tap event (jQuery Mobile)

• tap | jQuery Mobile API Documentation

原因の切り分け

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

• 現象を再現可能な最小限のソースになるまでソースコードを切り出す(他の余計な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 さん

Comments

[drunmei1373]

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

[think49]

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

[drunmei1373]

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

Answer 2

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

Comments

[drunmei1373]

お世話になっております。上の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イベントを試してみたのですが、どちらもダメでした。

[kei344]

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

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