javascript - library - Cruzando a nuevos elementos durante el touchmove

touchmove javascript

Question

Me gustaría hacerlo de modo que al arrastrar el dedo sobre un conjunto de elementos, el fondo del elemento en el que tiene el dedo cambia.

Parece que quiero usar el evento touchmove para esto, pero por lo que puedo decir, el elemento de destino nunca cambia, incluso cuando arrastres. El clientX y el clientY cambian, y encontré esta función document.elementFromPoint que funciona en Chrome, pero parece muy indirecta (además, no estoy seguro de qué navegadores lo admiten)

Vea este violín, quiero que las cajas se vuelvan verdes cuando las toque:

http://jsfiddle.net/QcQYa/9/

Por cierto, en Chrome, deberás acceder a la pestaña de agente de usuario del inspector config modal y elegir "emular eventos táctiles" para ver mi ejemplo.

Editar: encontré una idea para usar mouseenter aquí Cómo detectar elementos html en touchmove y funcionó en el escritorio de Chrome, pero no en el safari móvil.

Answer 1

Encontrará mi solución en este violín , lo probé en mi teléfono Android y funciona bien, usa jquerymobile para aprovechar el evento vmousemove , también adjunta un controlador al evento touchmove para evitar el desplazamiento de la vista del navegador en el móvil dispositivo.

Pego aquí los bits relevantes de HTML y JavaScript:

<div id="main" ontouchmove="touchMove(event);">
   <span class=''catch''>One</span>
   <span class=''catch''>Two</span>
   <span class=''catch''>Three</span>
   <span class=''catch''>Four</span>
   <span class=''catch''>Five</span>
   <span class=''catch''>Six</span>
   <span class=''catch''>Seven</span>
</div>

ahora el javascript:

function elem_overlap(jqo, left, top) {
   var d = jqo.offset();
   return top >= d.top && left >= d.left && left <= (d.left+jqo[0].offsetWidth)
          && top <= (d.top+jqo[0].offsetHeight);
}

/* To prevent WebView from scrolling on swipe, see http://goo.gl/DIZbm */
touchMove = function(event) {
   event.preventDefault(); //Prevent scrolling on this element
}

$("#main").bind("vmousemove", function(evt){
   $(''.catch'').each(function(index) {
      if ( elem_overlap($(this), evt.pageX, evt.pageY) ) {
         $(''.catch'').not(''eq(''+index+'')'').removeClass(''green'');
         if (!$(this).hasClass(''green'')) {
            $(this).addClass(''green'');
         }
      }
   });
});

Answer 2

No puede "activar un evento de toque" o cancelar los toques, lo que necesitaría para comenzar a tocar otro.

Por lo tanto, sería mejor vincular el evento touchmove al contenedor y manipular las cajas según su posición / tamaño y la posición táctil, como la parte de la respuesta de Dan Lee.

Answer 3

Tomé un enfoque diferente:

Cada evento táctil compruebo si la posición táctil está dentro de un objeto $(''.catch'') .

function highlightHoveredObject(x, y) {
    $(''.catch'').each(function() {
      // check if is inside boundaries
      if (!(
          x <= $(this).offset().left || x >= $(this).offset().left + $(this).outerWidth() ||
          y <= $(this).offset().top  || y >= $(this).offset().top + $(this).outerHeight()
      )) {

        $(''.catch'').removeClass(''green'');
        $(this).addClass(''green'');
      }
    });
}

Puedes verlo trabajando en jsFiddle .
Funciona en Chrome, espero que también lo haga en dispositivos móviles.

Editar :
En este violín utilicé ambas versiones, la mía y la del enlace en los comentarios ( document.elementFromPoint - una solución jQuery ), ambas parecen funcionar en mi teléfono Android. También agregué un punto de referencia rápido y sucio (ver consola) y, tal como se esperaba, document.elementFromPoint es un millar más rápido; si ese es su problema, debe verificar el soporte de document.elementFromPoint para los navegadores que desea.