jQuery 單擊事件在移動瀏覽器中不起作用

Question

jQuery click 事件似乎沒有在移動瀏覽器中觸發。

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 mobile 特定事件。

Answer 1

我知道這是一個已解決的老話題，但我剛剛回答了一個類似的問題，盡管我的回答可以幫助其他人，因為它涵蓋了其他解決方案選項：

單擊事件在啟用觸摸的設備上的工作方式略有不同。 沒有鼠標，所以技術上沒有點擊。 根據這篇文章 - 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

Answer 2

如果您已經（或不介意）使用 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;
   });
 });

這應該適用於您正在嘗試做的事情。

另外，我注意到您的網站在新標簽/窗口中打開了其他鏈接，這是故意的嗎？

Answer 3

您可以使用 jQuery Mobile vclick事件：

用於處理觸摸設備上的 touchend 或鼠標點擊事件的標准化事件。

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

Answer 4

我遇到了同樣的問題並通過添加"mousedown touchstart"修復它

$(document).on("mousedown touchstart", ".className", function() { // your code here });

被別人吞沒

Answer 5

JqueryMobile：重要 - 使用$(document).bind('pageinit') ，而不是$(document).ready() ：

$(document).bind('pageinit', function(){
   $('.publications').vclick(function() {
       $('#filter_wrapper').show();
   });
});

Answer 6

在 jQuery 中觸摸和點擊的解決方案（沒有 jQuery Mobile）

讓jQuery Mobile 站點構建您的下載並將其添加到您的頁面。 為了快速測試，您還可以使用下面提供的腳本。

接下來，我們可以使用以下代碼段重新連接對 $(...).click() 的所有調用：

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

<script>

$.fn.click = function(listener) {

    return this.each(function() {

       var $this = $( this );

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

    });

};
</script>

來源

Answer 7

使用此解決方案，您可能可以解決所有移動點擊問題。 僅使用“單擊”功能，但將 z-index:99 添加到 css 中的元素：

 $("#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

Answer 8

Vohuman 的回答引導我進行自己的實現：

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

代替：

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

我希望這有幫助！