javascript - child - jquery innerhtml
evento de jQuery burbujeando (7)
El concepto de "burbujear" es como si tuviera un elemento secundario con un evento de clic y no desea que active el evento de clic del elemento primario. Puedes usar event.stopPropagation() .
event.stopPropagation() básicamente dice que solo aplique este evento de clic a ESTE NODO DE NIÑO y no le diga nada a los contenedores principales porque no quiero que reaccionen.
Captura de eventos:
| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 / / | |
| ------------------------- |
| Event CAPTURING |
-----------------------------------
Burbujas de eventos:
/ /
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Event BUBBLING |
-----------------------------------
Si está utilizando live() o delegate() , deberá return false; , aunque puede que no funcione. Lea la cita a continuación.
Por documentos de jQuery :
Dado que el método .live () maneja eventos una vez que se han propagado a la parte superior del documento, no es posible detener la propagación de eventos en vivo. De manera similar, los eventos manejados por .delegate () se propagarán a los elementos a los que están delegados; los controladores de eventos enlazados en cualquier elemento debajo de él en el árbol DOM ya se habrán ejecutado en el momento en que se llame al controlador de eventos delegado. Por lo tanto, estos controladores pueden evitar que el controlador delegado se active al llamar a event.stopPropagation () o que devuelva falso.
En el pasado, se trataba de un problema de plataforma, Internet Explorer tenía un modelo burbujeante y Netscape era más acerca de la captura (aunque ambos admitían ambos).
El modelo W3C requiere que usted pueda elegir cuál desea.
Creo que el burbujeo es más popular porque, como se dijo, hay algunas plataformas que solo admiten el burbujeo ... y tiene sentido como un modo "predeterminado".
El que elija es en gran medida un producto de lo que está haciendo y lo que tiene sentido para usted.
Más información en http://www.quirksmode.org/js/events_order.html
Otro gran recurso: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
Quiero entender exactamente cómo interpretar burbujas. ¿Significa subir la jerarquía de código HTML o algo más?
En segundo lugar, estaba pasando por un example y no pude entender la última parte donde dice
El controlador de clics basado en P escucha el evento de clic y luego evita que se propague (burbujea hacia arriba)
¿Qué significa esto?
En el siguiente ejemplo, se adjunta un evento de clic para anclar con id "ancla". Este ancla está dentro de un div que también tiene un evento de clic adjunto. Si hacemos clic en este ancla, es tan bueno como estamos haciendo clic en el div que contiene. Ahora, si queremos hacer algunas cosas en este clic de anclaje pero no queremos que se dispare el clic del div, podemos detener el bubling del evento como se muestra a continuación.
<div id="div">
<a href="google.com" id="anchor"></a>
</div>
$("#div").click(function(e){//On anchor click this event will not be fired as we have stop the event propagation in anchor click handler.
//Do stuff here
});
$("#anchor").click(function(e){
//Do stuff here
//This line stops the event bubling and
//jquery has abstracted it in the event object to make it cross browser compatible.
e.stopPropagation();
});
Estos dos enlaces proporcionan una explicación clara y elaborada sobre el burbujeo de eventos (así como los conceptos de eventos comúnmente utilizados).
http://jqfundamentals.com/chapter/events
http://www.mattlunn.me.uk/blog/2012/05/what-does-event-bubbling-mean/
Desde el primer enlace.
el evento se activará para el elemento a, así como para todos los elementos que contienen la
a- todo el camino hasta eldocument
Desde el segundo enlace.
<div>
<h1>
<a href="#">
<span>Hello</span>
</a>
</h1>
</div>
Supongamos que hacemos clic en el intervalo, lo que hace que se active un evento de clic en el intervalo; Nada revolucionario hasta ahora. Sin embargo, el evento se propaga (o burbujea) al elemento principal del intervalo (el), y se dispara un evento de clic sobre eso. Este proceso se repite para el siguiente padre (o ancestro) hasta el elemento del documento.
Ahora pongamos todo esto en el contexto de un DOM. El DOM es un ... árbol y cada elemento es un nodo en el árbol DOM. El burbujeo es simplemente el recorrido de un nodo, some element del nodo raíz, document (siga a su padre hasta que ya no pueda)
Lo que dice es que el método live () adjunta un controlador al elemento de document y comprueba el target del evento para ver de dónde proviene. Si el objetivo coincide con el selector, entonces dispara eventHandler. Todo ese reposo en el sistema de eventos burbujeantes.
En el ejemplo, el controlador de clic en el elemento p , que es un antecesor del elemento a, cancela el burbujeo devolviendo false . Entonces, el elemento de document nunca recibirá el evento, por lo que no activará el controlador de eventos.
Sí, el evento sube al árbol y, si algún elemento tiene un controlador para ese evento, se llamará. Al agregar return:false en un manejador de uno de los elementos, se evitará que el evento burbujee.
return false;
Evitará "burbujear". Se utiliza para detener las acciones predeterminadas, como marcar una casilla de verificación, abrir una selección, un clic, etc.
Para evitar que otros controladores se ejecuten después de un enlace usando .live (), el controlador debe devolver falso. Llamar a .stopPropagation () no logrará esto.
De las advertencias en jQuery .live ()
Razonamiento (gracias a @AlienWebguy): La razón por la que stopPropagation() no funciona con live() es que live() vincula el evento con el documento, por lo que, cuando se dispara, no hay otro lugar donde pueda propagarse.