web-dev-qa-db-fra.com

Survolez et cliquez sur l'événement sur les appareils mobiles

Je crée un site Web réactif pour les ordinateurs de bureau et mobiles. J'ai un problème avec un événement de survol et de clic que je ne sais pas comment résoudre pour les utilisateurs d'appareils mobiles.

Sur le site, j'ai une boîte (div) qui est emballée dans un lien. Sur le bureau, lorsqu'un utilisateur la survole, une zone de couleur différente contenant du texte est glissée sur la première. Lorsqu'un utilisateur clique sur la case, le lien le dirige vers la page spécifiée. J'utilise jQuery pour cela.

À l'heure actuelle, sur un appareil mobile, lorsqu'un utilisateur appuie sur la boîte, la deuxième boîte glisse vers le bas. Mais il faut un deuxième appui pour suivre le lien. La société pour laquelle je crée cette application a demandé que, sur les appareils mobiles, lorsque l'utilisateur appuie sur une boîte, la deuxième boîte glisse vers le bas et, après un délai de 2 secondes, elle les envoie automatiquement vers une page spécifiée. De cette façon, un utilisateur n'est tenu de toucher qu'une seule fois.

Je ne sais pas comment faire ce travail. J'ai envisagé d'utiliser jQuery mobile, mais je ne parviens pas à contourner le premier tap (que les appareils mobiles traitent comme un événement de survol) et à activer le lien.

Merci

jqueryipadmobileresponsive-design
11
eCamK

Je suis d'accord avec @DZittersteyn sur le fait qu'il s'agit d'un mauvais design. Vous pouvez mieux afficher le contenu par défaut dans mobile afin que celui qui clique sache sur quoi il a cliqué.

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

ou vous pouvez utiliser

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

Essayez d’utiliser jQuery pour écouter les événements touchstart et touchend pour mobile.

EX:

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

J'espère que cela t'aides.

1
dotfury
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");
                });
        });
}
1
Artem Doink