jquery - eventos - touch events javascript

Desplazamiento de CSS no se ignora en los dispositivos de pantalla táctil

Question

He agregado un div con un botón html:

$(''.nav'').append(''<button class="restart">Restart</button>'');

El botón tiene propiedades CSS para desplazarse. Mi problema es que al tocar el botón en un dispositivo de pantalla táctil, el botón conserva su estado de desplazamiento hasta que se toca otro elemento.

¿Hay alguna forma de que la propiedad de desplazamiento se puede ignorar cuando se navega con un dispositivo de pantalla táctil?

Answer 1

Me encontré con este problema exacto recientemente, iOS parece considerar el hover psuedo como un clic adicional, por lo que los enlaces necesitarán hacer clic dos veces, etc.

Si usa modernizr , puede aplicar su: hover psuedos a través de la clase .no-touch que se aplica a la etiqueta html.

asi que:

html a { color:#222; }

html.no-touch a:hover { color:#111; }

Answer 2

No es una solución ideal, ¡pero gracias @dualed para el comienzo!

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
    button.restart:hover
    {
        /* replicate ''up'' state of element */
    }
}

Answer 3

Puede especificar el tipo de medio en sus reglas de CSS.

@media handheld {
  button.restart:hover {
    /* undo hover styling */
  }
}

Sin embargo, tenga en cuenta que los dispositivos portátiles no tienen necesariamente una pantalla táctil.

(Por cierto, esto es CSS no jQuery)

Answer 4

Quizás eso no es lo que quieres, pero puedes especificar diferentes hojas de estilo css dependiendo de los medios:

 <link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
 <link rel="stylesheet" media="print" href="print.css" type="text/css">
 <link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">

en el ejemplo anterior, main.css se usará para pantallas de computadora pero para dispositivos de mano, será smallscreen.css

Answer 5

Una manera agradable y fácil es usar Modernizr .

Cuando se ejecuta Modernizr, agregará una entrada en el atributo de clase de la etiqueta HTML para cada característica que detecte, prefijando la característica con no, si el navegador no lo admite.

Ahora agrega las siguientes líneas a tu hoja de estilo css

.touch *:hover {
    display: none;
}

Y usa libremente: desplázate cuantas veces quieras. Cuando su sitio se visualice en pantallas táctiles, se desactivará el efecto de desplazamiento de todos los elementos.