stopPropagation() con el evento tap

Question

Estoy usando hammer.js y parece que I event.stopPropagation() no funciona con el evento tap.

Si hago clic en el elemento secundario, el evento asociado se desencadena pero el evento principal también se desencadena y no quiero eso.

$('#parent').hammer().bind('tap', function(e) { 
    $(this).css('background', 'red'); 
});​​​​​​​​ 

$('#child').hammer().bind('tap', function(e) { 
    e.stopPropagation(); 
    $(this).css('background', 'blue'); 
}); 

Aquí se muestra un ejemplo: http://jsfiddle.net/Mt9gV/

También probé con jGestures y el problema parece ser la misma. ¿Cómo puedo lograr este resultado con una de esas bibliotecas? (u otro si es necesario)

Answer 1

Como se mencionó en otro comentario, es de esperar, como lo hizo, que llamar event.stopPropagation() sería todo lo que es requiere detener el evento de burbujeo hasta el padre.

Detalles: Sin embargo, en Hammer.js esto no es así. Hammer crea una nueva máquina de estados de gestos para cada elemento al que llamas al $(el).hammer(). Por lo tanto, cuando el navegador activa un evento táctil en el niño, primero se procesa con la lógica para el niño y luego nuevamente con la lógica del elemento principal. Como tal, para evitar que el padre obtenga el evento toque, debe evitar que la máquina de estado del martillo del padre obtenga el evento táctil original . En general, llamar al event.stopPropagation() también detendrá la propagación del evento original. Sin embargo, el evento tap de hammer.js se activa en touchend pero el originalEvent es el evento touchstart almacenado en caché. Como tal, detener la propagación en el evento original no tiene ningún efecto debido a que el evento touchstart ha surgido hace mucho tiempo a través del DOM.

¿Solución? Creo que esto es un error en el martillo - envíe una solicitud de extracción que corrige el originalEvent en el evento tap. Como otros han sugerido que puedes verificar el objetivo del evento, pero ese siempre es el elemento padre, otro error en mi opinión. Por lo tanto, consulte el event.originalEvent.target. Aquí está un JS fiddle con esta solución mediocre implementada: http://jsfiddle.net/HHRHR/

Answer 2

Si no puede hacer que esto funcione ... simplemente llame a otro método en el grifo después de verificar lo necesario (arguments.callee es donde comenzaría en tal caso), esto haría tienen la ventaja añadida de permitir que otros usuarios gancho del botón también ...

function myFn(a) { if(a) $(this).css('background', 'red'); else $(this).css('background', 'blue');}

$('#parent').hammer().bind('tap', function(e) { 
    //Check arguments.callee or other data in event and call myFn 
});​​​​​​​​ 

$('#children').hammer().bind('tap', function(e) { 
    //Same here 
}); 

Answer 3

se podría intentar comprobar e.currentTarget (o es e.target?) dentro del manejador de los padres para saber qué fue aprovechado elemento ; si es el elemento hijo, simplemente vuelve inmediatamente, de lo contrario continúa con la función.

Answer 4

Como no pude conseguir este trabajo, utilicé una variable para saber si el evento hijo ya se ha activado. Funciona bastante bien con jGestures (no he probado con hammer.js)

var childTriggered = false; 

$('#child').bind('tapone', function(e) { 
    $(this).css('background', 'red'); 
    childTriggered = true; 
}); 

$('#parent').bind('tapone', function(e) { 
    if(childTriggered) { 
     childTriggered = false; 
     return;     
    } 
    $(this).css('background', 'blue'); 
}); 

Answer 5

Tuve un problema similar con los eventos táctiles.

I resuelto mediante el uso de

return false; 

que es el mismo que llamar e.preventDefault(); e.stopPropagation();