Rilevamento del passaggio del mouse o del mouse sul browser dello smartphone

Question

Nella mia app ho una barra di scorrimento alfabetica (ASB), che la maggior parte degli smartphone ha nell'app Contacts.

Ora, ho il problema no per scorrere a voce specifica quando il mio dito touchstart touchend click etc.. su ASB. Ma, ho problemi a catturare l'evento hover o mouseover sul mio smartphone.

Ho provato touchstart touchswipe touchend mouseenter mousemove o hover senza lucchetti.

Ecco lo Fiddle o Codepen per giocare sul tuo cellulare.

Qualsiasi suggerimento è apprezzato.

Answer 1

TL; DR; touchmove, touchstart e touchend sono gli eventi che lo hanno reso possibile.

---

ho trovato che le persone continuano a dirmi che non è possibile in applicazioni non native per fornire la funzionalità di evento hover su smartphone.

Ma i moderni browser per smartphone hanno effettivamente fornito le funzionalità. Mi sono reso conto che la soluzione è letteralmente situata in un posto molto semplice. E con poche modifiche, ho capito come posso simulare questo comportamento su multipiattaforma anche se è un po 'imbroglio.

Quindi, la maggior parte di touchevents passa gli argomenti che contengono le informazioni necessarie in cui l'utente tocca lo schermo.

E.g

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

E siccome so che l'altezza di ogni tasto sul mio ASB, posso solo calcolare in cui l'utente si posiziona l'elemento su.

Ecco lo CodePen per provare più facilmente sui dispositivi touch mobili. (Si prega di notare che questo funziona solo su dispositivi touch, è comunque possibile utilizzare Chrome in modalità dispositivo commutato)

E questo è il mio codice finale,

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>

Answer 2

L'evento al passaggio del mouse viene attivato con eventi click/touch sul telefono cellulare, perché non è possibile posizionare semplicemente un elemento su un touch screen.

È possibile dimostrare questo comportamento semplicemente utilizzando il selettore CSS e/oi selettori di messa a fuoco per modificare il contenuto, è possibile vedere che prima di fare clic sugli elementi rimangono gli stessi, ma dopo aver fatto clic, mantengono gli stili modificati.

Answer 3

bind touchstart su un genitore. Qualcosa del genere funzionerà:

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

Non è necessario fare nulla nella funzione, lasciarlo vuoto. Questo sarà sufficiente per ottenere aleggi al tocco, quindi un tocco si comporta più come: al passaggio del mouse e meno come: attivo.

interrogazione How do I simulate a hover with a touch in touch enabled browsers?

Answer 4

Il codice che hai fornito nel tuo violino o Codepen sta lavorando bene. Allora, qual è il problema?

Beh, nella maggior parte dei gadget che attivano l'aria o il tocco come smartphone e tablet, non è possibile utilizzare semplicemente la funzione di passaggio del mouse perché non è possibile posizionare il mouse su di esso per creare alcuni eventi. È possibile utilizzare la funzione hover solo quando si utilizza ad esempio una tastiera rimovibile per tablet (o qualcosa che utilizza lo scorrimento del mouse o delle dita).