Estoy teniendo un problema para iPad/iPhone hover problema hace que el usuario haga doble clic en un vínculo donde un usuario pulsando el enlace a continuación, toque dos veces para ir realmente a ella.

He implementado la solución a esa pregunta, pero tengo un nuevo problema ahora. La redirección que sucede cuando el usuario pulsa un enlace, pero sucede no importa qué. Así que incluso si el usuario está tratando de desplazar la página, y empieza el desplazamiento en un enlace, la página redirige cuando se dejan de lado para el desplazamiento.

Hay una forma de mantener los vínculos de modo que sólo necesitan un toque, pero si son de desplazamiento, no redirigir a la página?

InformationsquelleAutor Jake | 2011-09-27

3 Comentarios

  1. 7

    Aquí es lo que acabé haciendo:

    El problema es que touchstart y touchend sólo saber acerca de eventos de toque, no los eventos de desplazamiento, por lo que sólo reaccionan a iniciar el contacto y poner fin al tacto. Lo que tenemos que hacer es distinguir entre el desplazamiento y no de desplazamiento. Esto es lo que hice:

    $('a')
        .live('touchstart', function(){
            isScrolling = false;
        })
        .live('touchmove', function(e){
            isScrolling = true;
        })
        .live('touchend', function(e){
            if( !isScrolling )
            {
                window.location = $(this).attr('href');
            }
        });

    Esto hace estas cosas en orden:

    1. Cuando toque se registró por primera vez, establecer isScrolling a false.
    2. Cuando toque se mueve, establecer isScrolling a la verdad. Esto no sucederá si el contacto no se mueve.
    3. Cuando toque se detiene, si el desplazamiento no ha sucedido, redirigir la página el link href.

    Edit: Un tiempo después de esto, descubrí que el problema era causado por SuperFish. La desactivación de superfish cuando la página estaba debajo de un determinado ancho resuelto el problema.

  2. 3

    Mi consejo es:

    • Agregar efectos hover en touchstart y mouseenter.
    • Quitar efectos hover en mouseleave, touchmove y click.

    Esto es similar a la respuesta de Jake, pero elimina la necesidad de emular el evento click.

    Fondo

    Con el fin de simular un ratón, navegadores como Webkit móvil de bomberos de los siguientes eventos si un usuario toca y libera un dedo en la pantalla táctil (como el iPad) (fuente: Táctil Y Ratón en html5rocks.com):

    1. touchstart
    2. touchmove
    3. touchend
    4. 300ms de retraso, cuando el navegador se asegura de que este es solo un toque, no de un doble toque en
    5. mouseover
    6. mouseenter
      • Nota: Si un mouseover, mouseenter o mousemove evento cambia el contenido de la página, de los siguientes eventos son nunca disparó.
    7. mousemove
    8. mousedown
    9. mouseup
    10. click

    No parece posible que simplemente indique el webbrowser para saltar los eventos del ratón.

    Lo que es peor, si un evento mouseover cambios en el contenido de la página, haga clic en el evento nunca disparó, como se explica en la Web Safari Guía De Contenidos – Gestión De Eventos, en particular, en la figura 6.4 en de Un Dedo Eventos. Qué es exactamente un «cambio de contenido», dependerá de navegador y su versión. He encontrado que para iOS 7.0, un cambio en el color de fondo no es (o no?) un cambio de contenido.

    Solución Explicó

    Para recapitular:

    • Agregar efectos hover en touchstart y mouseenter.
    • Quitar efectos hover en mouseleave, touchmove y click.

    Nota que no hay acción en touchend!

    Claramente esto funciona para los eventos de ratón: mouseenter y mouseleave (ligeramente versiones mejoradas de mouseover y mouseout) son despedidos, y agregar y quitar el hover.

    Si el usuario realmente clicks de un enlace, el efecto de hover también se quita. Este asegurarse de que se elimina si el usuario presiona el botón atrás en el navegador web.

    Esto también funciona para eventos de toque: en touchstart el efecto de hover, se añade. Es «‘no»‘ eliminado en touchend. Se agrega de nuevo en mouseenter, y ya que este no causa cambios de contenido (que ya era agregado), el click evento también se disparó, y el vínculo es seguido sin la necesidad de que el usuario haga clic de nuevo!

    La 300ms retraso que un navegador tiene entre un touchstart evento y click es en realidad, poner en buen uso, porque el efecto de hover será mostrado durante este corto periodo de tiempo.

    Si el usuario decide cancelar el clic, un movimiento de los dedos va a hacer así como normal. Normalmente, esto es un problema ya que no mouseleave evento es disparado, y el efecto de hover permanece en su lugar. Afortunadamente, esto puede ser fácilmente fijado por la eliminación del efecto de hover en touchmove.

    Que es!

    Tenga en cuenta que es posible eliminar la 300ms retraso, por ejemplo el uso de la FastClick biblioteca, pero esto está fuera del alcance de esta pregunta.

    Soluciones Alternativas

    He encontrado los siguientes problemas con las siguientes alternativas:

    • la detección del navegador: Muy propenso a errores. Se supone que un dispositivo tiene el mouse o el tacto, mientras que una combinación de ambos, se convertirá en más y más común cuando pantallas táctiles prolifirate.
    • CSS medios de detección: La única CSS-la única solución que yo sepa. Todavía propenso a errores, y aún así se supone que un dispositivo tiene el ratón o táctil, mientras que las dos cosas son posibles.
    • Emular el evento click en touchend: Este incorrectamente seguir el enlace, incluso si el usuario sólo quería scroll o zoom, sin la intención de hacer clic en el enlace.
    • Utilizar una variable para suprimir los eventos de ratón: Este conjunto de una variable en touchend que se utiliza como un si-condición en posteriores eventos de ratón evita los cambios de estado en ese punto en el tiempo. La variable se restablece en el evento click. Esta es una solución digna si usted realmente no quiere un efecto de hover en interfaces táctiles. Por desgracia, esto no funciona si un touchend es despedido por otra razón y no haga clic en evento es disparado (por ejemplo, el usuario desplaza o zoom), y, posteriormente, tratando de seguir el enlace con un ratón (que yo.e en un dispositivo con el ratón y la interfaz táctil).

    Leer Más

    Ver también Deshabilitar efectos hover en los navegadores móviles.

  3. 0

    Si su contenido se encuentra en una UIScrollView, usted puede (o puede que ya han implementado el UIScrollViewDelegate; la cual contiene el siguiente método:

    -(void)scrollViewDidScroll: (UIScrollView*)scrollView

    Si utiliza este método, y se obtiene lo siguiente:

    float offset = scrollView.contentOffset.y;
    
    if (offset > 0)
        //then we have started to scroll

    Si utiliza esta condición junto con la detección del número de grifos/prensas actualmente en la pantalla (es decir, sólo que en su caso), a continuación, hacer caso omiso de cualquier despedido llamadas (si >1 taps) que puede producirse cuando un enlace es explotado.

    Espero que esto ayude!

    • Se me ocurrió una forma de hacer el trabajo. Yo iba a publicar como una respuesta, pero ASÍ no me dejaba hacer que durante 8 horas. 55 más para ir.

Dejar respuesta

Please enter your comment!
Please enter your name here