javascript - 在iPad问题上悬停状态

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

在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/上查看实时站点

最佳答案

现在的问题是，现在在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
      });
  });

我没有尝试过代码，但是应该可以。让我知道是否可以。

关于javascript - 在iPad问题上悬停状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42608834/