Question

我有一个砌体布局，每个单元格都是一个超链接，需要显示悬停状态。

在ipad上（如预测的那样）悬停状态未显示。客户端已经请求链接现在需要两次点击：一次显示悬停状态，第二次点击以使用超链接 - 所以我使用了这一点javascript：

      $(document).ready(function() {
      $('.my_button').bind('touchstart touchend', function(e) {
          e.preventDefault();
          $(this).toggleClass('hover_effect');
      });
  });

现在的问题是，在ipad上现在显示悬停状态（这很棒），但第二次点击被忽略，什么也没做。

您可以在http://mayce.derringer.com.au/residential/

查看实际网站

Answer 1

现在的问题是，在ipad上现在显示悬停状态（即很好），但第二次点击被忽略，什么也没做。

用

e.preventDefault();

您可以阻止默认行为，因此点击/触摸将永远无法跟踪链接。试试这样

$(document).ready(function() {
      $('.my_button').bind('touchstart touchend', function(e) {
          if($(this).hasClass('hover_effect') {
              return; // skip rest of code, so default will happen
                      // which is following the link
          }
          e.preventDefault();
          $(this).addClass('hover_effect'); // no reason to toggleClass
                                            // cause the seccond click/touch should always go to destination
      });
  });

现在可能你想要它，但如果点击/触摸另一个$('.my_button')你需要将hover_effect移到所有其他my_button(s)，那么添加

$('.my_button').not(this).removeClass('hover_effect');

喜欢这样

$(document).ready(function() {
      $('.my_button').bind('touchstart touchend', function(e) {
          $('.my_button').not(this).removeClass('hover_effect');
          if($(this).hasClass('hover_effect') {
              return; // skip rest of code 
          }
          e.preventDefault();
          $(this).addClass('hover_effect'); // no reason to toggleClass
                                            // cause the seccond click/touch should always go to destination
      });
  });

我没有尝试过代码，但应该可以使用。如果没有，请告诉我。

Answer 2

进行更多研究，我提出了这个有效的解决方案：

    jQuery(document).ready(function(){
    $('.middle').bind('touchstart touchend', function(e) {
        //This will return true after the first click
        //and preventDefault won't be called.
        if(!$(this).hasClass('nav_returnlink'))
            e.preventDefault();

        $(this).addClass('nav_returnlink');
    });
});

在ipad问题上悬停状态

2 个答案: