Passa col mouse e fai clic su evento sui dispositivi mobili

Question

Sto creando un sito Web reattivo per desktop e dispositivi mobili. Ho un problema con un hover e un evento click che non so come risolvere per gli utenti sui dispositivi mobili.

Sul sito, ho una casella (div) che è racchiusa in un collegamento. Sul desktop, quando un utente vi passa sopra, una casella colorata diversa con contenuto di testo scorre verso il basso sulla prima casella. Quando un utente fa clic sulla casella, il collegamento li porta alla pagina specificata. Sto usando jQuery per questo.

In questo momento, su un dispositivo mobile, quando un utente tocca la casella, la seconda casella scorre verso il basso. Ma ci vuole un secondo tocco per seguire effettivamente il collegamento. La società per cui sto creando questo ha richiesto che, sui dispositivi mobili, che quando l'utente tocca una casella, la seconda casella scorrerà verso il basso e dopo un ritardo di 2 secondi, li invierà automaticamente a una pagina specificata. In questo modo, un utente deve solo toccare una volta.

Non so come farlo funzionare. Ho pensato di utilizzare jQuery mobile, ma non riesco a capire un modo per aggirare il primo tocco (che i dispositivi mobili trattano come un evento di hover) e attivare invece il link.

Grazie

Answer 1

Sono d'accordo con @DZittersteyn sul fatto che questo è un cattivo progetto. Puoi mostrare meglio il contenuto per impostazione predefinita nel dispositivo mobile in modo che chi fa clic sappia cosa ha fatto clic.

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

oppure è possibile utilizzare

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

Provare a utilizzare jQuery per ascoltare i touchstart e touchend eventi per cellulari.

EX:

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

Spero che questo aiuti.

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