Hover Zustand auf Ipad Problem

Question

Ich habe ein Mauerwerk Layout mit jeder Zelle ist inFact ein Hyperlink erfordert einen Hover-Status angezeigt werden.

Auf dem iPad (wie vorhergesagt) wurden die Hover-Zustände nicht angezeigt. Der Kunde hat darum gebeten, dass die Links jetzt zwei Klicks benötigen, sollten einmal den Hover-Zustand anzuzeigen, und ein zweiter Klick auf den Hyperlink zu engagieren - So habe ich dieses Stück javascript:

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

Das Problem ist jetzt, dass auf ipad Die Hover-Zustände werden nun angezeigt (was super ist), aber der zweite Klick wird ignoriert und tut nichts.

Sie können die Live-Website unter 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.

Mit

e.preventDefault(); 

sehen Sie das Standardverhalten zu verhindern, so dass die Klick-/touch wird nie in der Lage sein, den Link zu folgen. Versuchen Sie, wie so

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

Jetzt wahrscheinlich Sie es wollen, dass, obwohl, wenn Klick/touch auf einem anderen $('.my_button') müssen Sie die hover_effect zu allen anderen my_button(s) so entfernen

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

hinzufügen wie so

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

Ich habe den Code nicht ausprobiert, aber es sollte funktionieren. Lass es mich wissen, wenn es nicht so ist.

Answer 2

Ein wenig mehr Forschung, und ich habe mit dieser Lösung kommen, die funktioniert:

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