Tengo algunos sitios web que construí hace tiempo, que usan eventos de jquery mouse ... Acabo de recibir un ipad y noté que todos los eventos de mouse sobre se traducen en clics ... así que, por ejemplo, tengo que hacer dos clics en lugar de uno .. (el primer desplazamiento, que el clic real)
¿Hay alguna solución lista para resolver esto? tal vez un comando jquery que debería haber utilizado en lugar de pasar el mouse / out, etc.
Respuestas:
No lo he probado completamente, pero dado que iOS dispara eventos táctiles, esto podría funcionar, suponiendo que esté en una configuración de jQuery.
La idea es que Mobile WebKit active un
touchend
evento al final de un toque, por lo que escuchamos eso y luego redirigimos el navegador tan pronto comotouchend
se haya activado un evento en un enlace.fuente
.on
se prefiere.live
. Después de leer esta respuesta, descubrí que cambiar mi código$('a').on('click touchend', function(e) {...})
funciona de manera excelente.target="_blank"
, se abrirá en la misma ventana Y en una nueva ventana.No está del todo claro cuál es su pregunta, pero si solo desea eliminar el doble clic, mientras mantiene el efecto de desplazamiento del mouse, mi consejo es:
touchstart
ymouseenter
.mouseleave
,touchmove
yclick
.Antecedentes
Para simular un mouse, los navegadores como Webkit mobile activan los siguientes eventos si un usuario toca y suelta un dedo en la pantalla táctil (como iPad) (fuente: Touch And Mouse en html5rocks.com):
touchstart
touchmove
touchend
mouseover
mouseenter
mouseover
,mouseenter
omousemove
acontecimiento cambia el contenido de la página, los siguientes eventos no son despedidos.mousemove
mousedown
mouseup
click
No parece posible decirle simplemente al navegador web que omita los eventos del mouse.
Lo que es peor, si un evento de mouseover cambia el contenido de la página, el evento de clic nunca se activa, como se explica en la Guía de contenido web de Safari - Manejo de eventos , en particular la figura 6.4 en Eventos de un dedo . Lo que es exactamente un "cambio de contenido" dependerá del navegador y la versión. Descubrí que para iOS 7.0, un cambio en el color de fondo no es (¿o ya no?) Un cambio de contenido.
Solución explicada
Recordar:
touchstart
ymouseenter
.mouseleave
,touchmove
yclick
.Tenga en cuenta que no hay acción en
touchend
!Esto claramente funciona para eventos de mouse:
mouseenter
ymouseleave
(versiones ligeramente mejoradas demouseover
ymouseout
) se disparan, y agregan y eliminan el cursor.Si el usuario realmente tiene
click
un enlace, el efecto de desplazamiento también se elimina. Esto garantiza que se elimine si el usuario presiona el botón Atrás en el navegador web.Esto también funciona para eventos táctiles: en
touchstart
el efecto de desplazamiento se agrega. Se '' 'no' '' se eliminó eltouchend
. Se agrega nuevamentemouseenter
y, dado que esto no causa cambios en el contenido (ya se agregó), elclick
evento también se activa y se sigue el enlace sin necesidad de que el usuario haga clic nuevamente.El retraso de 300 ms que tiene un navegador entre un
touchstart
evento yclick
realmente se usa bien porque el efecto de desplazamiento se mostrará durante este corto tiempo.Si el usuario decide cancelar el clic, un movimiento del dedo lo hará de la forma habitual. Normalmente, esto es un problema ya que no
mouseleave
se dispara ningún evento y el efecto de desplazamiento permanece en su lugar. Afortunadamente, esto se puede solucionar fácilmente eliminando el efecto de desplazamientotouchmove
.¡Eso es!
Tenga en cuenta que es posible eliminar el retraso de 300 ms , por ejemplo, utilizando la biblioteca FastClick , pero esto está fuera del alcance de esta pregunta.
Soluciones alternativas
He encontrado los siguientes problemas con las siguientes alternativas:
touchend
: Esto seguirá incorrectamente el enlace, incluso si el usuario solo desea desplazarse o hacer zoom, sin la intención de hacer clic en el enlace.touchend
que se usa como condición if en eventos posteriores del mouse para evitar cambios de estado en ese momento. La variable se restablece en el evento click. Esta es una solución decente si realmente no desea un efecto de desplazamiento en las interfaces táctiles. Desafortunadamente, esto no funciona sitouchend
se dispara a por otra razón y no se dispara ningún evento de clic (por ejemplo, el usuario se desplaza o hace zoom), y posteriormente intenta seguir el enlace con un mouse (es decir, en un dispositivo con mouse e interfaz táctil) )Otras lecturas
mouseover
omousemove
evento.Consulte también el problema de doble clic del iPad / iPhone y Desactivar los efectos de desplazamiento en los navegadores móviles .
fuente
Parece que hay una solución CSS después de todo. La razón por la que Safari espera un segundo toque es por la imagen de fondo (o elementos) que generalmente asigna en el evento: hover. Si no se muestra ninguno, no tendrá ningún problema. La solución es apuntar a la plataforma iOS con un archivo CSS secundario (o estilo en el caso de un enfoque JS) que anula: desplazar el fondo para heredar, por ejemplo, y mantener ocultos los elementos que iba a mostrar al pasar el mouse:
Aquí hay un ejemplo de CSS y HTML: un bloque de producto con una etiqueta destacada al pasar el mouse:
HTML:
CSS:
Solución (CSS secundario):
fuente
No hay necesidad de hacer demasiado complicado.
fuente
Lo que funcionó para mí es lo que otros aquí ya han dicho:
No mostrar / ocultar elementos al pasar el mouse o mover el mouse (que es el evento en mi caso).
Esto es lo que dice Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):
Por lo tanto, podría usar la solución de @ woop: detectar el UserAgent, verificar si es un dispositivo iOS y luego vincular el evento. Terminé usando esta técnica porque se adapta a mis necesidades y tiene más sentido no vincular eventos de desplazamiento cuando no lo desee.
Pero ... si no quiere meterse con UserAgents y aún así ocultar / mostrar elementos en hover / mousemove, descubrí que puede hacerlo utilizando javascript nativo, como este:
Esto funcionará en la versión de escritorio y no hará nada en la versión móvil.
Y para un poco más de compatibilidad ...
fuente
La solución de cduruk fue bastante efectiva, pero causó problemas en algunas partes de mi sitio. Debido a que ya estaba usando jQuery para agregar la clase de desplazamiento de CSS, la solución más fácil era simplemente no agregar la clase de desplazamiento de CSS en dispositivos móviles (o más precisamente, agregarla SOLO cuando NO esté en un dispositivo móvil).
Aquí estaba la idea general:
* código reducido con fines ilustrativos
fuente
Creo que sería prudente intentarlo
mouseenter
en lugar demouseover
. Es lo que se usa internamente cuando se vincula.hover(fn,fn)
y generalmente es lo que desea.fuente
Tuve los siguientes problemas con las soluciones existentes y encontré algo que parece resolverlos a todos. Esto supone que estás apuntando a algo entre navegadores, dispositivos cruzados, y no quieres que el dispositivo lo detecte.
Los problemas que esto resuelve
Usando solo
touchstart
otouchend
:Desencadenar
mouseover
eventos entouchstart
ymouseout
sobretouchmove
tiene consecuencias menos graves, pero no interfiere con el comportamiento habitual del navegador, por ejemplo:touchstart
como unmouseover
, que semouseout
edita en el siguientetouchstart
. Por lo tanto, una forma de ver el contenido del mouseover en Android es tocar el área de interés y mover el dedo, desplazando ligeramente la página. Tratandotouchmove
comomouseout
rompe esto.La solución
En teoría, podría agregar una bandera con
touchmove
, pero los iPhones activan el movimiento táctil incluso si no hay movimiento. En teoría, usted podría comparar eltouchstart
etouchend
casopageX
ypageY
aunque en iPhones, no haytouchend
pageX
opageY
.Desafortunadamente, para cubrir todas las bases, termina siendo un poco más complicado.
En teoría, hay formas de obtener el tiempo exacto utilizado para una pulsación larga en lugar de solo usar 1000 como aproximación, pero en la práctica no es tan simple y es mejor usar un proxy razonable .
fuente
La respuesta de MacFreak fue extremadamente útil para mí. Aquí hay un código práctico en caso de que te ayude.
PROBLEMA : la aplicación de toque significa que cada vez que desliza el dedo sobre un elemento, responde como si lo hubiera presionado, incluso si solo intentara pasar.
Estoy creando un efecto con jQuery que desvanece una línea debajo de algunos botones para "resaltar" el botón suspendido. No quiero que esto signifique que tienes que presionar el botón dos veces en dispositivos táctiles para seguir el enlace.
Aquí están los botones:
Quiero que el div "menu_underline" se desvanezca con el mouseover y se desvanezca con el mouseout. PERO quiero que los dispositivos táctiles puedan seguir el enlace con un solo clic, no dos.
SOLUCIÓN : Aquí está jQuery para que funcione:
Muchas gracias por su ayuda en este MacFreak.
fuente
Me acabo de enterar de que funciona si agregas un oyente vacío, no me preguntes por qué, pero lo probé en iPhone y iPad con iOS 9.3.2 y funcionó bien.
fuente
"Creo" que sus enlaces no tienen un evento onmouseover, donde 1 toque activa onmouseover y el doble toque activa el enlace. pero idk. No tengo iPad Creo que tienes que usar gestos / eventos táctiles.
https://developer.apple.com/documentation/webkitjs
fuente
Tuve el mismo problema pero no en un dispositivo táctil. El evento se dispara cada vez que haces clic. Hay algo sobre la cola de eventos más o menos.
Sin embargo, mi solución fue la siguiente: al hacer clic en el evento (¿o tocar?) Configura un temporizador. Si se vuelve a hacer clic en el enlace dentro de X ms, simplemente devuelve falso.
Para establecer el temporizador por elemento, puede usar
$.data()
.Esto también puede solucionar el problema @Ferdy descrito anteriormente.
fuente
Si usa Modernizr, es muy fácil usar Modernizr.touch como se mencionó anteriormente.
Sin embargo, prefiero usar una combinación de Modernizr.touch y pruebas de agente de usuario, solo para estar seguro.
Si no usa Modernizr, simplemente puede reemplazar la
Modernizr.touch
función anterior con('ontouchstart' in document.documentElement)
También tenga en cuenta que probar el agente de usuario iemobile le dará una gama más amplia de dispositivos móviles de Microsoft detectados que Windows Phone.
fuente
Puedes usar
click touchend
,ejemplo:
El ejemplo anterior afectará a todos los enlaces en dispositivos táctiles.
Si desea orientar solo enlaces específicos, puede hacerlo estableciendo una clase en ellos, es decir:
HTML:
<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>
Jquery:
Salud,
Jeroen
fuente
Me encontré con una situación similar en la que tenía eventos vinculados a los estados del mouseenter / mouseleave / click de un elemento, pero en un iPhone, el usuario tenía que hacer doble clic en el elemento para activar primero el evento del mouseenter, y luego nuevamente para activar el evento click .
Resolví esto usando un método similar al anterior, pero hice uso del complemento jQuery $ .browser (para jQuery 1.9>) y agregué un evento .trigger al evento de enlace del mouseenter, de la siguiente manera:
El .trigger evita la necesidad de hacer doble clic en el elemento activando el controlador de eventos .click en el mouseenter (o clic inicial) del elemento cuando se ve en iPhones o iPads. Puede que no sea la solución más elegante, pero funciona muy bien en mi caso y utiliza un complemento que ya tenía instalado, y requería que agregara una sola línea de código para que mis eventos existentes funcionen bajo estos dispositivos.
Puede obtener el complemento jQuery $ .browser aquí: https://github.com/gabceb/jquery-browser-plugin
fuente
Solo una mejora para evitar la redirección cuando desliza su dedo en un enlace por error.
fuente
Con la inspiración de MacFreak, armé algo que funciona para mí.
Este método js evita que el desplazamiento se pegue en un ipad y evita que el clic se registre como dos clics en algunos casos. En CSS, si tiene alguna clase: hover psudo en su CSS, cámbiela a .hover Por ejemplo .some-class: hover a .some-class.hover
Pruebe este código en un ipad para ver cómo los métodos css y js hover se comportan de manera diferente (solo en efecto de desplazamiento). El botón CSS no tiene una alerta de clic elegante. http://jsfiddle.net/bensontrent/ctgr6stm/
fuente
Para que los enlaces funcionen sin romper el desplazamiento táctil, resolví esto con el evento "tap" de jQuery Mobile:
fuente
Llego demasiado tarde, lo sé, pero esta es una de las soluciones más fáciles que he encontrado:
Esto no solo funciona para enlaces (etiquetas de anclaje) sino también para otros elementos. Espero que esto ayude.
fuente
Este fragmento corto parece funcionar. Activa el evento de clic cuando se toca el enlace:
fuente
Ninguno de la otra respuesta funciona para mí. Mi aplicación tiene muchos oyentes de eventos, casillas de verificación propias y enlaces que tienen oyentes y enlaces sin oyentes.
Yo uso esto:
fuente
Esto funciona para mí cuando tienes jquery ui desplegable
fuente
Evite cambiar el estilo de "visualización" dentro del evento hover css. Tenía "display: block" en estado de desplazamiento. Después de eliminar ios se fue a lins con un solo toque. Por cierto, parece que las últimas actualizaciones de iOS arreglaron esta "característica"
fuente
La forma más simple de resolver hacer doble clic en el iPad es envolver su CSS para el efecto de desplazamiento en la consulta de medios
@media (pointer: fine)
:El CSS que se incluye en esta consulta de medios se aplicará solo en el escritorio.
La explicación de esta solución está aquí https://css-tricks.com/annoying-mobile-double-tap-link-issue/
fuente
Podrías comprobar
navigator.userAgent
así:pero tendrías que buscar moras, droides y otros dispositivos con pantalla táctil. También puede enlazar los mouseovers solo si el userAgent contiene Mozilla, IE, Webkit u Opera, pero aún necesita buscar algunos dispositivos porque el Droid, por ejemplo, informa su cadena de userAgent como:
La cadena del iPhone es similar. Si solo realiza la pantalla para iPhone, iPod, iPad, Android y Blackberry, es posible que obtenga la mayoría de las computadoras de mano, pero no todas.
fuente
Simplemente haga una consulta de medios CSS que excluya tabletas y dispositivos móviles y coloque el cursor allí. Realmente no necesitas jQuery o JavaScript para esto.
Y asegúrese de agregar esto a su cabeza html para asegurarse de que se calcule con los píxeles reales y no con la resolución.
fuente