Zdarzenie najechania i kliknięcia na urządzeniach mobilnych

Question

Tworzę responsywną witrynę zarówno na komputery stacjonarne, jak i komórkowe. Mam jeden problem z zdarzeniem "Najedź i kliknij", którego nie jestem pewien, jak rozwiązać dla użytkowników na urządzeniach mobilnych.

Na stronie mam pudełko (div) zapakowane w link. Na pulpicie, gdy użytkownik się nad nim unosi, inne kolorowe pudełko z zawartością tekstu zsuwa się nad pierwszym pudełkiem. Gdy użytkownik kliknie pole, link przeniesie go do określonej strony. Używam do tego jQuery.

Teraz, na urządzeniu mobilnym, gdy użytkownik dotknie pudełka, drugie opakowanie zostanie zsunięte. Ale ponowne kliknięcie łącza wymaga drugiego dotknięcia. Firma, dla której ją tworzę, zażądała, aby na urządzeniach mobilnych, gdy użytkownik dotknie skrzynki, drugie pudełko zsunie się i po upływie 2 sekund opóźnienia automatycznie wyśle ​​je na określoną stronę. W ten sposób użytkownik musi tylko raz dotknąć.

Nie jestem pewien, jak to zrobić. Myślałem o używaniu jQuery mobile, ale nie potrafię wymyślić sposobu na ominięcie pierwszego dotknięcia (które urządzenia mobilne traktują jak zdarzenie najechania) i aktywowanie tego linku.

Dzięki

Answer 1

Zgadzam się z @DZittersteyn na fakt, że jest to zły projekt. Możesz domyślnie wyświetlać treść na urządzeniach mobilnych, aby osoba, która kliknie, wie, co kliknął.

if(!!('ontouchstart' in window)){//check for touch device 
    $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners 
    $('myElement').on('click',function(){ 
    //slide down code 
    setTimeout(function(){ 
     window.location.href='asdasd.html'; 
     },2000); 
    }); 
} 

lub użyć

if(!!('ontouchstart' in window)){//check for touch device 
//behaviour and events for touch device 
} 
else{ 
//behaviour and events for pointing device like mouse 
} 

Answer 2

Spróbuj użyć jQuery słuchać touchstart i touchend wydarzeń dla telefonów komórkowych.

EX:

$('selector').bind('touchstart', function(){ 
    //some action 
}); 
$('selector').bind('touchend', function(){ 
    //set timeout and action 
}); 

Nadzieja to pomaga.

Answer 3

if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) { 
    $(".touch") 
     .bind("touchstart", function() { 
      $(this) 
       .addClass("active") 
       .bind("touchend", function() { 
        $(this).removeClass("active"); 
       }); 
     }) 
     .bind("touchenter", function() { 
      $(this) 
       .addClass("hover") 
       .bind("touchleave", function() { 
        $(this).removeClass("hover active"); 
       }); 
     }); 
}