web-dev-qa-db-fra.com

Détection du survol ou du passage de la souris sur le navigateur du smartphone

J'ai une barre de défilement alphabétique (ASB) dans mon application, que la plupart des smartphones ont dans leur application Contacts.

Maintenant, j'ai non problème pour faire défiler jusqu'à un élément spécifique lorsque mon doigt touchstart touchend click etc.. sur le ASB. Mais, j'ai un problème pour capturer l'événement hover ou mouseover sur mon smartphone.

J'ai essayé touchstart touchswipe touchend mouseenter mousemove ou hover sans chance.

Voici le Fiddle ou Codepen pour jouer sur votre mobile.

Toute suggestion est appréciée.

javascriptjqueryhtmlcssmobile
10
choz

TL; DR ; touchmove, touchstart et touchend sont les événements qui ont rendu cela possible.

J'ai constaté que les gens n'arrêtaient pas de me dire qu'il n'était pas possible sur une application non native de fournir la fonctionnalité d'événement de survol sur un smartphone. 

Mais, les navigateurs de smartphones modernes ont fourni les fonctionnalités. J'ai réalisé que la solution réside littéralement dans un endroit très simple. Et avec quelques ajustements, j'ai imaginé comment simuler ce comportement sur plusieurs plates-formes, même s'il est un peu trompeur.

Ainsi, la plupart des touchevents transmettent les arguments contenant les informations nécessaires lorsque l'utilisateur touche à l'écran.

E.g 

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

Et puisque je connais la hauteur de chaque bouton de ma ASB, je peux simplement calculer où l’utilisateur survole l’élément.

Voici le CodePen pour essayer plus facilement sur les appareils tactiles mobiles. (Notez que cela ne fonctionne que sur les appareils tactiles, vous pouvez toujours utiliser le chrome sur le mode d'appareil basculé))

Et ceci est mon code final,

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

L'événement de survol est déclenché par des événements de clic/toucher sur un téléphone mobile, car vous ne pouvez pas simplement survoler un élément sur un écran tactile.

Vous pouvez démontrer ce comportement en utilisant simplement les sélecteurs de survol et/ou de focus de CSS pour modifier le contenu. Vous pouvez constater qu'avant de cliquer sur les éléments restent les mêmes, ils conservent les styles modifiés.

0
Leo Napoleon

Le code que vous avez fourni dans votre Fiddle ou Codepen fonctionne correctement. Alors, quel est le problème?

Eh bien, dans les gadgets principalement à déclenchement aérien ou tactile, tels que les smartphones et les tablettes, vous ne pouvez pas simplement utiliser la fonction de survol, car vous ne pouvez pas survoler dessus pour faire certains événements. Vous ne pouvez utiliser la fonction de survol que lorsque vous utilisez, par exemple, un clavier amovible pour tablette (ou quelque chose utilisant la souris ou le défilement du doigt).

0
rhavendc

lie touchstart sur un parent. Quelque chose comme ça va marcher:

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

Vous n'avez rien à faire dans la fonction, laissez-la vide. Cela sera suffisant pour obtenir des survols au toucher, de sorte qu'un contact se comporte davantage comme: survol et moins comme: actif. 

Question similaire Comment simuler un survol avec des navigateurs tactiles?

0
smarttechy