TL; DR; touchmove, touchstart und touchend sind die Ereignisse, die dies möglich gemacht haben.
Ich habe festgestellt, dass mir zu sagen, die Menschen halten, dass es auf nicht-native App nicht möglich ist, die Funktionalität von Hover-Ereignisse auf dem Smartphone zur Verfügung zu stellen.
Aber die modernen Smartphone-Browser haben tatsächlich die Funktionen zur Verfügung gestellt. Ich erkannte, dass die Lösung buchstäblich an einem sehr einfachen Ort liegt. Und mit ein paar Optimierungen habe ich mir überlegt, wie ich dieses Verhalten simulieren kann, obwohl es etwas betrügerisch ist.
So, die meisten touchevents übergeben die Argumente, die die erforderlichen Informationen haben, wo der Benutzer auf dem 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 Taste auf meiner ASB weiß, ich kann nur berechnen, wo der Benutzer auf das Element schwebt.
Hier ist die CodePen, um es einfacher auf mobilen Touch-Geräten zu versuchen. (Bitte beachten Sie, dies funktioniert nur auf Touch-Geräten können Sie noch Chrom verwenden, um auf ein- und Gerätemodus)
Und das ist mein letzter 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>
nicht sicher, ob ich verstehe, was Du versuchst es zu erreichen? Der Hover funktioniert gut für mich? –
@SCraig Funktioniert es in Ihrem mobilen Browser? – choz
Es gibt keinen Schwebeflug auf dem Smartphone. Das Gerät kann es nicht erkennen. Sie erhalten nur Klicks, ziehen etc. –