javascript - ejemplo - Alternativa preferida para OnMouseOver for touch
onmouseover javascript ejemplo (4)
¿Existe una alternativa preferida o una mejor práctica para manejar eventos de OnMouseOver javascript en dispositivos táctiles? Todo lo que puedo pensar es convertir todos los eventos en OnMouseClick. Desafortunadamente, esto altera las diferencias entre los eventos activados al pasar el cursor y los eventos activados al hacer clic en el cursor.
¿Existen alternativas, o alternativas, que sean menos perjudiciales para el UX de una página web que se utilizará tanto con dispositivos de mouse como con dispositivos táctiles?
¿Existe una alternativa preferida o una mejor práctica para manejar eventos de OnMouseOver javascript en dispositivos táctiles?
La respuesta corta es no.
Los eventos específicos del dispositivo no tienen una asignación 1: 1 a los eventos de otros dispositivos. No hay un equivalente apropiado de ''flotar'' cuando se usa Touch.
Los eventos del mouse ( mouseover , mouseout , mousedown , mouseup , mousemove , etc.) son específicos del dispositivo de entrada del mouse. El teclado tiene teclas , teclas y teclados . Touch tiene touchstart , touchmove , touchend y touchcancel . Webkit en el iPhone / iPad / etc tiene eventos adicionales de inicio / movimiento / final de gestos que son específicos de Apple.
Los eventos genéricos de alto nivel como el enfoque , el desenfoque , el clic , el envío , etc. pueden desencadenarse en uno de estos eventos. Un evento de clic , por ejemplo, se puede activar con un mouse, toque o evento de teclado. ( click , btw, es un evento con un nombre inapropiado, que más bien debería llamarse acción, pero debido a su historial de Mouse todavía se llama clic ).
El enfoque preferido (o "One Web") es utilizar los eventos del mouse para cosas específicas del mouse donde no se pueden evitar y seguir los eventos genéricos para todo lo demás.
Dependiendo de la construcción de WebKit y las banderas usadas para construirlo, puede desencadenar algunos eventos de mouse en algunas interfaces táctiles en algunos casos especiales , pero realmente no desea construir su UI sobre eso porque la única razón por la que existen estos casos es para permitir mobile-Webkit para obtener tracción en el mercado.
Los eventos táctiles también son inconsistentes en todas las plataformas. Eche un vistazo al trabajo de ppk para obtener alguna referencia si está haciendo algo móvil / táctil, http://quirksmode.org/mobile/tableTouch.html
Creo que logré crear una buena simulación (al menos para un controlador de eventos específico que quería simular) combinando el controlador de eventos ''touchmove'' y llamando al método elementFromPoint () utilizando las coordenadas (almacenadas en las propiedades clientX / clientY del objeto) del objeto Touch relevante en el evento (utilicé e.touches [0]).
Para obtener una respuesta más detallada, consulte mi respuesta para el caso de uso específico de este usuario (llenar las celdas de una tabla) en función de una solución a mi propio problema (alternar los estados de la casilla de verificación) aquí: https://.com/a/31711040/1941313 .
Alternativamente, lea el informe completo que escribí sobre cómo encontrar el diseño del controlador de eventos de escritura, incluidas las fuentes de mis hallazgos en la siguiente esencia: https://gist.github.com/VehpuS/6fd5dca2ea8cd0eb0471
(Los habría publicado en pero mi representante es muy bajo en este momento, así que solo puedo proporcionar dos enlaces: P)
¡Espero que esto ayude!
Dependiendo de sus demandas y de los usuarios objetivo, puede estar interesado en las API táctiles JS disponibles (al menos) en los dispositivos móviles Safari y Chrome. Consulte http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html , para obtener una introducción rápida (quizás un poco anticuada). Realmente no los he usado mucho (solo para iPhone, por ejemplo) pero estoy muy contento con los resultados que he obtenido hasta ahora.
Los eventos onmouseover / onmouseout javascript se traducirían en los eventos táctiles touchenter / touchleave, el problema es que estos eventos están empezando a implementarse en los navegadores (son parte de un borrador del W3C ), actualmente solo Firefox lo admite , por lo que si está utilizando webkit tendrá que esperarlo, o implementar su función onmouseover utilizando el evento touchmove y mirando las coordenadas y para ver si se superponen con las coordenadas de su elemento html.