jQuery click事件在移动浏览器中不起作用

2020/12/28 06:11 · jquery ·  · 0评论

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

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

这应该可以满足您的尝试。

另外,我注意到您的网站在新标签页/窗口中打开了其他链接,这是故意的吗?

我知道这是一个已解决的老话题,但是我只是回答了一个类似的问题,尽管我的回答可以帮助其他人,因为它涵盖了其他解决方案选项:

点击事件在启用触摸的设备上的工作方式略有不同。没有鼠标,因此从技术上讲没有点击。根据这篇文章(http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html)-由于内存限制,仅从锚点和输入元素模拟并调度click事件。其他任何元素都可以使用触摸事件,也可以通过向原始html元素添加处理程序来手动初始化单击事件,例如,对列表项强制单击事件:

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

现在,点击将由li触发,因此可以被jQuery监听。


根据您的情况,您可以将监听器更改为@ mason81放置的锚元素,或者在li上使用touch事件:

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

这是一些实验的小提琴-http: //jsbin.com/ukalah/9/edit

您可以使用jQuery Mobilevclick事件:

规范事件,用于处理触摸设备上的touchend或鼠标单击事件。

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

我有同样的问题,并通过添加来解决 "mousedown touchstart"

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

对别人有好感

JqueryMobile:重要-使用$(document).bind('pageinit'),不$(document).ready()

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

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>

资源

Vohuman的答案将我引向了我自己的实现:

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

代替:

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

我希望这有帮助!

使用此解决方案,您可能可以解决所有移动点击问题。仅使用“点击”功能,但将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

本文地址:http://jquery.askforanswer.com/jquery-clickshijianzaiyidongliulanqizhongbuqizuoyong.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!