¿Cómo solucionar el problema de penetración del punto Zepto?

1. ¿Qué es "hacer clic"?

Es posible que haya encontrado una capa emergente creada en la página de lista. La capa emergente tiene un botón de cierre en el que puede hacer clic. Después de cerrar la capa emergente, el contenido directamente debajo del botón también ejecutará el evento de clic (o abrirá el enlace). Esto se define como el fenómeno del "clic".

Encontré el siguiente problema en un proyecto anterior: después de hacer clic en el componente de selección emergente en la esquina superior derecha, la entrada en el cuadro de entrada se concentrará en el teclado después de que se complete la entrada emergente. completado, es decir, el punto de penetración

2. ¿Por qué es un punto de penetración?

Esto requiere ver la implementación del método tap desde el código fuente de zepto (o jqm):

Como puede ver, el método tap de zepto escucha los eventos táctiles vinculados al documento. Complete la simulación del evento de toque, y el evento de toque se activa al difundirse en el documento

y luego hacer clic en el evento de toque (evento de toque). La finalización del evento de toque (touchstart/touchend) debe aparecer en el documento antes de que se active. Antes de aparecer en el documento, la mano del usuario toca la pantalla (touchstart) y sale de la pantalla (touchend) se activa mediante el evento de clic. , debido a que el evento de clic Hay un retraso cuando se activa (es por eso que los terminales móviles no usan clics ni toques) (aproximadamente 300 ms para implementar el diseño de evento de doble clic de Safari), por lo que después de que se ejecuta el evento de toque, la selección emergente El componente se ocultará inmediatamente. En este momento, el evento de clic todavía tiene un retraso de aproximadamente 300 ms. Cuando llegan los 300 ms, el elemento a continuación no está realmente oculto después de hacer clic en el elemento a continuación. Si el elemento a continuación está vinculado a un evento de clic. Se activará en este momento. Si el evento de clic no está vinculado, cuando no hay clic, el cuadro de entrada (o el cuadro de selección o la casilla de verificación de radio) aparece en la esquina inferior derecha. Haga clic en el foco predeterminado y el teclado de entrada. Aparecerá y aparecerá el fenómeno de penetración de puntos anterior.

3. Solución puntual:

Opción 1: es muy sencillo. Hay un clic rápido en github que puede resolver perfectamente el problema /ftlabs/fastclick

<. p>Presentamos fastclick .js, debido a que el código fuente de fastclick no depende de otras bibliotecas, puede agregarlo directamente delante del js nativo

1 window.addEventListener( "load", function() {

2 FastClick.attach ( document.body );

3 }, false );

O hay un zepto o jqm

1 $(function() {

2 FastClick.attach(document.body);

3 });

Por supuesto, lo mismo ocurre cuando se usa require:

1 var FastClick = require( 'fastclick');

2 FastClick.attach(document.body, opciones);

Opción 2 : Reemplace el evento tap con touchend y evite el comportamiento predeterminado de touchend.

preventDefault()

1 $("#cbFinish").on("touchend", function (event) {

2 // Mucho procesamiento, como ocultar, etc. .

3 event.preventDefault();

4 } );

2 // Una gran cantidad de procesamiento, como ocultar, etc.

3 event.preventDefault() ;

4 } );

4);

Opción 3: Retrasar el evento por un período determinado de tiempo (más de 300 milisegundos)

1 $("#cbFinish").on("tap", function (event) {

2 setTimeout(function(){

3 //mucho procesamiento, como ocultar algo

4 },320);

5 });

Este método es en realidad muy bueno y se puede utilizar con animaciones como aparición y desaparición gradual para producir un efecto de exceso de velocidad

En teoría, el método anterior puede resolver perfectamente el problema de la penetración de la luz, pero si no funciona, por favor use clic