wake-up-neo.net

Erkennung von Hover oder Mouseover im Smartphone-Browser

Ich habe in meiner App eine alphabetische Bildlaufleiste (ASB), die die meisten Smartphones in ihrer Contacts-App haben.

Nun habe ich no problem, um zu einem bestimmten Element zu scrollen, wenn sich mein Finger touchstart touchend click etc.. auf dem ASB. Befindet. Ich habe jedoch ein Problem mit dem Erfassen von hover oder mouseover auf meinem Smartphone.

Ich habe touchstart touchswipe touchend mouseenter mousemove oder hover ohne Glück versucht.

Hier ist der Fiddle oder Codepen , um auf Ihrem Handy herumzuspielen.

Jeder Vorschlag wird geschätzt.

10
choz

TL; DR ; touchmove, touchstart und touchend sind die Ereignisse, die dies möglich gemacht haben.


Ich habe festgestellt, dass die Leute immer wieder sagen, dass es nicht möglich ist, die Funktionalität eines Hover-Ereignisses auf einer nicht-nativen App auf dem Smartphone bereitzustellen. 

Die modernen Smartphone-Browser haben jedoch tatsächlich die Funktionen bereitgestellt. Ich erkannte, dass die Lösung buchstäblich an einem sehr einfachen Ort liegt. Und mit ein paar Änderungen habe ich herausgefunden, wie ich dieses Verhalten plattformübergreifend simulieren kann, auch wenn es etwas schummelt.

Daher übergeben die meisten von touchevents die Argumente mit den erforderlichen Informationen, wenn der Benutzer den Bildschirm berührt.

E.g

var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;

Und da ich die Höhe jeder Schaltfläche auf meiner ASB kenne, kann ich einfach berechnen, wo der Benutzer das Element anhebt.

Hier ist der CodePen , um es einfacher auf mobilen Touchgeräten zu versuchen. (Beachten Sie, dass dies nur bei Touch-Geräten funktioniert. Sie können Chrome auch im umgeschalteten Gerätemodus verwenden.)

Und das ist mein endgültiger Code,

var $startElem, startY;

function updateInfo(char) {
  $('#info').html('Hover is now on "' + char + '"');
}

$(function() {
  var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
  for (var i = 0; i < strArr.length; i++) {
    var $btn = $('<a />').attr({
        'href': '#',
        'class': 'btn btn-xs'
      })
      .text(strArr[i].toUpperCase())
      .on('touchstart', function(ev) {
        $startElem = $(this);
        var touch = ev.originalEvent.changedTouches[0];
        startY = touch.clientY;
        updateInfo($(this).text());
      })
      .on('touchend', function(ev) {
        $startElem = null;
        startY = null;
      })
      .on('touchmove', function(ev) {
        var touch = ev.originalEvent.changedTouches[0];
        var clientY = touch.clientY;

        if ($startElem && startY) {
          var totalVerticalOffset = clientY - startY;
          var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.

          if (indexOffset > 0) {
            $currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          } else {
            $currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);
            if ($currentBtn.text()) {
              updateInfo($currentBtn.text());
            }
          }
        }
      });

    $('#asb').append($btn);
  }
});
#info {
  border: 1px solid #adadad;
  position: fixed;
  padding: 20px;
  top: 20px;
  right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
  No hover detected
</div>
<div id="asb" class="btn-group-vertical">
</div>

5
choz

Das Hover-Ereignis wird durch Klick-/Berührungsereignisse auf dem Mobiltelefon ausgelöst, da Sie ein Element nicht einfach auf einem Touchscreen schweben können.

Sie können dieses Verhalten demonstrieren, indem Sie einfach den CSS-Hover- und/oder Fokus-Auswahlschalter verwenden, um den Inhalt zu ändern. Sie können sehen, dass Elemente vor dem Klicken gleich bleiben, aber nach dem Klicken die geänderten Stile beibehalten.

0
Leo Napoleon

Der Code, den Sie in Ihrer Fiddle oder in Codepen angegeben haben, funktioniert einwandfrei. Also, was ist die Aufregung?

Nun, in meist luft- oder berührungsauslösenden Geräten wie Smartphones und Tablets können Sie die Hover-Dinger-Funktion nicht einfach verwenden, da Sie nicht Dover-Elemente darauf legen können, um Ereignisse zu machen. Sie können die Hover-Funktion nur verwenden, wenn Sie zum Beispiel eine abnehmbare Tastatur für Tablets verwenden (oder etwas, das Maus oder Fingerscroller verwendet).

0
rhavendc

bindet den Touchstart eines Elternteils. So etwas wird funktionieren:

$('body').bind('touchstart', function() {});

Sie müssen nichts in der Funktion tun, lassen Sie sie leer. Dies reicht aus, um bei Berührung Schwebeflüge zu erhalten, so dass sich eine Berührung mehr wie folgt bewegt: Schweben und weniger wie: Aktiv. 

Ähnliche Frage Wie simuliere ich einen Hover mit einem Touch-In-Touch-Browser?

0
smarttechy