Erkennen hover-oder mouseover für smartphone-browser

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

Habe ich gefunden, dass Leute sagen mir immer, dass es nicht möglich ist, auf nicht-native app um die Funktionalität der hover-event auf dem smartphone.

Aber, die modernen smartphone-Browsern haben tatsächlich die Funktionalitäten. Ich erkannte, dass die Lösung ist buchstäblich liegt in einem sehr einfachen Platz. Und mit ein paar tweaks, ich habe herausgefunden, wie ich simulieren kann dieses Verhalten zu cross-Plattform-auch wenn es ein bisschen schummeln.

So, die Meistentouchevents übergeben, die Argumente, die die benötigten Informationen, wenn der Benutzer berührt den Bildschirm.

E. g

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

Und da ich weiß, dass die Höhe jeder Taste auf meiner ASB, kann ich einfach berechnen, wo der Benutzer mit der Maus das element auf.

Hier ist die CodePen, um zu versuchen, es einfacher auf mobile touch-Geräte. (Bitte beachten Sie, dies funktioniert nur auf Geräten mit Touchscreen können Sie immer noch mit chrome auf die umgeschaltet device-Modus)

- Und dies ist meine Letzte code,

JS:

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

CSS:

#info {
  border: 1px solid #adadad;
  position: fixed;
  padding: 20px;
  top: 20px;
  right: 20px;
}

HTML:

<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>

binden touchstart auf ein Elternteil. So etwas wie dies funktionieren wird:

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

Brauchen Sie nicht, etwas zu tun in der Funktion, lassen Sie es leer. Dies reicht aus, um mit der Maus auf touch, also eine Berührung, verhält sich eher wie :hover und weniger wie :active.

Ähnliche Frage Wie kann ich simulieren, ein schweben mit einem touch-in touch-fähige Browser?