javascript - iPad 问题上的悬停状态

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

The problem now is that on ipad the hover states now display (which is great), but the second click is being ignored and does nothing.

与

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

我还没有尝试过代码，但它应该可以工作。如果没有，请告诉我。