☰

jQuery クリックイベントがモバイルブラウザで動作しない 質問する

tag-icon • tag-icon jquery android ipad mobile
jQuery クリックイベントがモバイルブラウザで動作しない 質問する

jQuery クリック イベントはモバイル ブラウザーでは発生しないようです。

HTML は次のとおりです。

<!-- This is the main menu -->
<ul class="menu">
   <li><a href="/home/">HOME</a></li>
   <li class="publications">PUBLICATIONS &amp; PROJECTS</li>
   <li><a href="/about/">ABOUT</a></li>
   <li><a href="/blog/">BLOG</a></li>
   <li><a href="/contact/">CONTACT</a></li>
 </ul>


 <!-- This is the sub-menu that is to be fired on click -->
 <div id="filter_wrapper">
   <ul id="portfolioFilter">
      <li><a href="/nutrition-related/">Nutrition related</a></li>
      <li><a href="/essays/">Essays and Nonfiction</a></li>
      <li><a href="/commissioned/">Commissioned works</a></li>
      <li><a href="/plays/">Plays and performance</a></li>
      <li><a href="/new-projects/">New Projects</a></li>
    </ul>
  </div>

これはモバイル用の jQuery スクリプトです:

$(document).ready(function(){
   $('.publications').click(function() {
       $('#filter_wrapper').show();
   });
 });

モバイル ブラウザーで「出版物」リスト項目をクリックしても何も起こりません。

このサイトはここからご覧いただけます:http://www.ruthcrocker.com/

jQuery モバイル固有のイベントがあるかどうかはわかりません。

ベストアンサー1

これは解決済みの古いトピックであることは承知していますが、私はちょうど同様の質問に答えました。私の回答は他の解決策のオプションもカバーしているので、他の人の役に立つかもしれません。

クリックイベントはタッチ対応デバイスでは少し違った動作をします。マウスがないので、技術的にはクリックはありません。この記事によると -http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html- メモリ制限のため、クリック イベントはアンカー要素と入力要素からのみエミュレートされ、ディスパッチされます。他の要素ではタッチ イベントを使用することも、生の HTML 要素にハンドラーを追加してクリック イベントを手動で初期化することもできます (たとえば、リスト項目にクリック イベントを強制するなど)。

$('li').each(function(){
    this.onclick = function() {}
});

これでクリックは li によってトリガーされ、jQuery でリッスンできるようになります。

あなたの場合、@mason81 がうまく説明したように、リスナーをアンカー要素に変更するか、リスナーでタッチ イベントを使用することができます。

$('.menu').on('touchstart', '.publications', function(){
    $('#filter_wrapper').show();
});

ここでいくつかの実験をしてみましょう -http://jsbin.com/ukalah/9/edit

おすすめ記事