it-swarm.com.de

Bewegen Sie den Mauszeiger auf das mobile Gerät

Ich erstelle eine responsive Website für Desktop und Mobile. Ich habe ein Problem mit einem Hover- und Click-Ereignis, bei dem ich nicht sicher bin, wie es für Benutzer auf mobilen Geräten zu lösen ist.

Auf der Site habe ich eine Box (div), die in einen Link eingebunden ist. Wenn ein Benutzer auf dem Desktop darüber fährt, wird ein anderes farbiges Kästchen mit Textinhalt über das erste Kästchen verschoben. Wenn ein Benutzer auf das Kästchen klickt, führt der Link sie zur angegebenen Seite. Ich verwende dafür jQuery.

Wenn jetzt auf einem mobilen Gerät ein Benutzer auf die Box tippt, rutscht die zweite Box nach unten. Es dauert jedoch ein zweites Antippen, um dem Link tatsächlich zu folgen. Das Unternehmen, für das ich das erstellt habe, hat angefordert, dass auf Mobilgeräten das zweite Kästchen nach unten gerutscht wird und der Benutzer nach einer Verzögerung von 2 Sekunden diese automatisch an eine angegebene Seite sendet. Auf diese Weise muss ein Benutzer nur einmal tippen.

Ich bin nicht sicher, wie ich das schaffen soll. Ich habe über die Verwendung von jQuery Mobile nachgedacht, aber ich kann keinen Weg finden, den ersten Tipp (den mobile Geräte wie ein Hover-Ereignis behandeln) zu umgehen und stattdessen den Link zu aktivieren.

Vielen Dank

11
eCamK

Ich stimme @DZittersteyn darin zu, dass dies ein schlechtes Design ist. Sie können den Inhalt besser in Mobile standardmäßig anzeigen, sodass derjenige, der klickt, weiß, was er angeklickt 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 du kannst verwenden

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

Verwenden Sie jQuery, um die Ereignisse touchstart und touchend für Mobilgeräte abzuhören.

EX:

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

Hoffe das hilft.

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