Hover-und Klick-Ereignis auf mobilen Geräten

Erstelle ich eine responsive website für desktop und mobile. Ich habe ein Problem mit hover und click-Ereignis, das ich bin nicht sicher, wie Sie Sie zu lösen, für die Nutzer auf mobilen Geräten.

Auf der Website, ich habe eine box (div), die ist verpackt in einem link. Auf dem desktop, wenn der Benutzer mit der Maus über es, einem anderen farbigen box mit text-Inhalt rutscht nach unten über die erste box. Wenn ein Benutzer auf das Feld klickt, den link gelangen Sie auf die angegebene Seite. Ich benutze jQuery für diese.

Gerade jetzt, auf einem mobilen Gerät, wenn ein Benutzer tippt auf die box, zweite box rutscht nach unten. Aber es dauert eine Sekunde, Tippen Sie auf, um tatsächlich Folgen Sie dem link. Die Firma, die ich bin für die Erstellung dieser aufgefordert hat, auf mobilen Geräten, dass, wenn der Benutzer tippt eine box, die zweite box wird nach unten rutschen und nach einer 2 Sekunden Verzögerung, es wird automatisch senden Sie Sie zu einer bestimmten Seite. Auf diese Weise wird der Benutzer nur erforderlich, um eine Tippen Sie einmal.

Ich bin mir nicht sicher, wie diese Arbeit zu machen. Ich dachte über die Verwendung von jQuery mobile, aber ich kann nicht herausfinden, ein Weg, um die erste bypass-Tippen Sie auf (der mobilen Geräte behandeln wie ein hover-Ereignis), und aktivieren Sie den link.

Dank

  • Wow, das klingt wirklich ärgerlich. Sicher, Kunde will, was der Kunde will, aber eine automatische Weiterleitung ist (IMHO) ein bisschen schlechtes design.
InformationsquelleAutor eCamK | 2012-08-29
  1. 12

    Stimme ich mit @DZittersteyn auf die Tatsache, dass dies ein schlechtes design. Sie können besser zu zeigen, den Inhalt standardmäßig in mobile so, dass derjenige, der klickt, der weiß, was er geklickt hat.

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

    oder verwenden Sie

    if(!!('ontouchstart' in window)){//check for touch device
//behaviour and events for touch device
}
else{
//behaviour and events for pointing device like mouse
}
    • Was bedeutet !! bedeuten? Wäre das nicht äquivalent zu nicht nicht oder gleich gar nichts.
    • stackoverflow.com/questions/4686583/...
    • Ich Stimme mit der Bedeutung der !! in javascript aber nicht if() automatisch umgewandelt test einem boolean aufpassen falsey Werte? Zum Beispiel let a = {}; if(a['unknownKey']) {console.log(true); \\ won't log} else {console.log(false); // will log} console.log(!!a['unknownKey']);. Denken kann nicht von einem Fall, wo if() nicht in der Lage ist zu casten, richtig zu boolean aber !! Betreiber übernimmt.
    InformationsquelleAutor sabithpocker
  2. 1
    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");
                });
        });
}
    InformationsquelleAutor Artem Doink
  3. 0

    Versuchen mit Hilfe von jQuery zu hören touchstart und touchend Veranstaltungen für mobile.

    EX:

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

    Hoffe, das hilft.

    • zuerst müssen Sie die Bindung, die Veranstaltung und binden Sie es
    InformationsquelleAutor dotfury
Schreibe einen Kommentar