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

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

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

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

Answer 5

我遇到了同样的问题并通过添加"mousedown touchstart"解决了它

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

从别人那里得到的

Answer 6

在 jQuery 中触摸和点击的解决方案（不使用 jQuery Mobile）

让jQuery Mobile site build your download 并将其添加到您的页面。为了快速测试，您还可以使用下面提供的脚本。

接下来，我们可以使用以下 sn-p 重新连接对 $(...).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>

source

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
  });
});

我希望这会有所帮助！

Answer 9

$('.publications').on('mousedown touchstart', 
   $('#filter_wrapper').show();
});