Desplácese y haga clic en evento en dispositivos móviles

Question

Estoy creando un sitio web receptivo para computadoras de escritorio y dispositivos móviles. Tengo un problema con un evento de desplazamiento y clic que no estoy seguro de cómo resolver para los usuarios en dispositivos móviles.

En el sitio, tengo un recuadro (div) que está envuelto en un enlace. En el escritorio, cuando un usuario pasa sobre él, un cuadro de diferente color con contenido de texto se desliza hacia abajo sobre el primer cuadro. Cuando un usuario hace clic en el cuadro, el enlace lo lleva a la página especificada. Estoy usando jQuery para esto.

En este momento, en un dispositivo móvil, cuando un usuario toca el cuadro, el segundo cuadro se desliza hacia abajo. Pero se necesita un segundo toque para seguir realmente el enlace. La empresa para la que estoy creando esto ha solicitado que, en dispositivos móviles, cuando el usuario toque un cuadro, el segundo cuadro se deslice hacia abajo y después de un retraso de 2 segundos, los envíe automáticamente a una página específica. De esta forma, solo se requiere que el usuario toque una vez.

No estoy seguro de cómo hacer que esto funcione. Pensé en usar jQuery para dispositivos móviles, pero no puedo encontrar la forma de eludir el primer toque (que los dispositivos móviles tratan como un evento de desplazamiento) y activar el enlace en su lugar.

Gracias

Answer 1

Estoy de acuerdo con @DZittersteyn en el hecho de que este es un mal diseño. Puede mostrar mejor el contenido de forma predeterminada en el dispositivo móvil para que el que hace clic sepa en qué hizo 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); 
    }); 
} 

o puede utilizar

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

Trate de usar jQuery para escuchar las touchstart y touchend eventos para móvil.

EX:

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

Espero que esto ayude.

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