35

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 モバイル固有のイベントがあるかどうかは不明です。

4

9 に答える 9

46

これは解決済みの古いトピックであることは知っていますが、同様の質問に答えたところですが、私の答えは他の解決策のオプションをカバーしているため、他の人を助けることができます:

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

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

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

あなたの場合、@ mason81 によって非常によく配置されているように、リスナーをアンカー要素に変更するか、li でタッチイベントを使用することができます。

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

これはいくつかの実験のフィドルです - http://jsbin.com/ukalah/9/edit

于 2013-08-14T23:23:58.373 に答える
28

すでに jQuery Mobile を使用している (または気にしない) 場合は、Raminson から適切な回答が得られます。別の解決策が必要な場合は、次のようにコードを変更してください。

問題のある LI を変更して A タグを含め、LI の代わりにそこにクラスを適用します。

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

そして、あなたのjavascript/jqueryコード...バブリングを止めるためにfalseを返します。

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

これは、あなたがやろうとしていることでうまくいくはずです。

また、あなたのサイトは他のリンクを新しいタブ/ウィンドウで開くことに気付きましたが、それは意図的なものですか?

于 2012-05-23T15:14:31.860 に答える
7

jQuery Mobilevclickイベントを使用できます。

タッチ デバイスで touchend またはマウス クリック イベントを処理するための正規化されたイベント。

$(document).ready(function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
 });
于 2012-05-23T15:07:43.317 に答える
4

JqueryMobile:重要 -$(document).bind('pageinit')ではなくを使用$(document).ready():

$(document).bind('pageinit', function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
});
于 2012-06-04T18:01:55.427 に答える
2

jQuery でのタッチ アンド クリックのソリューション (jQuery Mobile なし)

jQuery Mobile サイトでダウンロードをビルドし、ページに追加します。簡単なテストのために、以下に提供されているスクリプトを使用することもできます。

次に、次のスニペットを使用して、$(…).click() へのすべての呼び出しを再配線できます。

<script src=”http://u1.linnk.it/qc8sbw/usr/apps/textsync/upload/jquery-mobile-touch.value.js”&gt;</script>

<script>

$.fn.click = function(listener) {

    return this.each(function() {

       var $this = $( this );

       $this.on(‘vclick’, listener);

    });

};
</script>

ソース

于 2014-11-22T20:55:39.670 に答える
2

このソリューションを使用すると、おそらくすべてのモバイル クリックの問題を解決できます。「クリック」機能のみを使用しますが、css の要素に z-index:99 を追加します。

  $("#test").on('click', function(){
    alert("CLICKED!")
  });
#test{   
  z-index:99;
  cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div id="test">CLICK ME</div>

クレジット: https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone

于 2019-04-11T20:01:47.210 に答える
1

Vohumanの答えは、私自身の実装につながりました：

$(document).on("vclick", ".className", function() {
  // Whatever you want to do
});

それ以外の：

$(document).ready(function($) {
  $('.className').click(function(){
    // Whatever you want to do
  });
});

これが役立つことを願っています！

于 2015-07-17T17:46:40.243 に答える