Tengo una barra de desplazamiento alfabético (ASB) en mi aplicación, que la mayoría de los teléfonos inteligentes tienen en su aplicación Contacts.

Ahora, tengo no problema para desplazarme a un elemento específico cuando mi dedo touchstart touchend click etc.. en el ASB. Pero tengo problemas para capturar el evento hover o mouseover en mi teléfono inteligente.

He intentado touchstart touchswipe touchend mouseenter mousemove o hover sin suerte.

Aquí está el Fiddle o Codepen para jugar en tu móvil.

Cualquier sugerencia es apreciada.

13
choz 9 may. 2016 a las 13:11

4 respuestas

La mejor respuesta

TL; DR ; touchmove, touchstart y touchend son los eventos que hicieron esto posible.


He descubierto que la gente sigue diciéndome que no es posible en una aplicación no nativa proporcionar la funcionalidad de evento de desplazamiento en el teléfono inteligente.

Pero, los navegadores modernos de teléfonos inteligentes realmente han proporcionado las funcionalidades. Me di cuenta de que la solución está literalmente en un lugar muy simple. Y con algunos ajustes, he descubierto cómo puedo simular este comportamiento en multiplataforma a pesar de que es un poco engañoso.

Entonces, la mayoría de touchevents están pasando los argumentos que tienen la información necesaria donde el usuario toca en la pantalla.

Por ejemplo

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

Y como sé la altura de cada botón en mi ASB, puedo calcular dónde el usuario pasa el elemento.

Aquí está el CodePen para probarlo más fácilmente en dispositivos táctiles móviles. (Tenga en cuenta que esto solo funciona en dispositivos táctiles, aún puede usar Chrome en modo de dispositivo activado)

Y este es mi código 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>
6
vadi taslim 3 jun. 2016 a las 01:19

El código que proporcionó en su Fiddle o Codepen funciona bien. Entonces, ¿cuál es el alboroto?

Bueno, en su mayoría dispositivos aéreos o de activación táctil como teléfonos inteligentes y tabletas, no puede simplemente usar la función de desplazamiento del mouse porque no puede desplazar el mouse sobre él para realizar algunos eventos. Solo puede usar la función de desplazamiento cuando está usando, por ejemplo, un teclado extraíble para tableta (o algo que usa el mouse o el desplazamiento del dedo).

0
rhavendc 30 may. 2016 a las 08:44

Vincular inicio táctil en un padre. Algo como esto funcionará:

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

No necesita hacer nada en la función, déjelo vacío. Esto será suficiente para mantener el cursor sobre el toque, por lo que un toque se comporta más como: desplazarse y menos como: activo.

Pregunta similar ¿Cómo simulo? un vuelo estacionario con un navegador táctil habilitado?

0
Community 23 may. 2017 a las 11:51

El evento de desplazamiento se activa con eventos de clic / toque en el teléfono móvil, ya que no puede simplemente desplazar un elemento en una pantalla táctil.

Puede demostrar este comportamiento simplemente usando el cursor de CSS y / o los selectores de enfoque para modificar el contenido, puede ver que antes de hacer clic en los elementos siguen siendo los mismos, pero después de hacer clic conservan los estilos modificados.

0
Leo Napoleon 27 may. 2016 a las 09:37