El mecanismo de burbujas JS se refiere a si un elemento define el evento A, como un evento de clic.
Como se muestra en el siguiente ejemplo:
La copia del código es la siguiente:
<html>
<script type = "text/javaScript" src = "jQuery-1.7.1.js"> </script>
<script>
función ialertDouble (e) {
alerta ('InnerDouble');
stopbubble (e);
}
función ialertThree (e) {
alerta ('interno');
stopbubbledOuble (e);
}
función stopbubble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // evitar que las burbujas se hinchen;
}
función stopbubbledOuble (e) {
var evt = e || window.event;
evt.stoppropagation? evt.stoppropagation () :( evt.cancelbubble = true); // evitar que las burbujas se hinchen;
evt.preventDefault (); // bloquea el comportamiento predeterminado del navegador para que el enlace no salte
}
$ (function () {
// Método 1
//$('#jqueryTest').Cluce(function(Event) {
// alerta ('innerfour');
// event.stoppropagation ();
// event.preventDefault ();
//});
// Método 2
$ ('#jQueryTest'). Click (function () {
alerta ('innerfour');
devolver falso;
});
});
</script>
<div onClick = "alerta ('sin');"> sin
<div onClick = "alerta ('Middle');"> Middle
<div onClick = "alerta ('interior');"> Inner </div>
<div onClick = "ialertDouble (evento)"> InnerDouble </div>
<P> <a href = 'http: //www.baidu.com' onClick = "ialertThree (evento)"> InnerThree </a> </p>
<p id = 'jQueryTest'> <a href = 'http: //www.baidu.com'> innerfour </a> </p>
</div>
</div>
</html>
Cuando haga clic en Inner, 'interno', 'medio' y 'sin' aparecerá a su vez. Esta es la burbuja del evento.
Hablando intuitivamente, este es el caso, porque el área más interna está en el nodo principal.
De hecho, muchas veces, no queremos que los eventos burbujeen, porque esto desencadenará varios eventos al mismo tiempo.
SIGUIENTE: Hagamos clic en InnerDouble. Descubrirá que no está burbujeada porque llamó al método stopbubble () en el método llamado ialertDouble ().
Pero si se trata de un enlace, encontraremos que también evitará burbujas, pero saltará, que es el comportamiento predeterminado del navegador. Debe bloquearse utilizando el método PreventDefault (). Para más detalles, puede consultar IALERTTHREE ().
En la actualidad, las personas convencionales usan jQuery para vincular los eventos de clic, lo cual es mucho más simple.
Podemos pasar en el evento de parámetro al hacer clic en el evento, y luego directamente
event.stopPropagation ();
event.preventDefault ();
Eso es todo.
El marco es bueno, pero de hecho hay uno más simple.
[Vea el código detallado anterior, recuerde cargar jQuery.js. 】
De hecho, también puede agregar juicios a cada evento de clic:
La copia del código es la siguiente:
$ ('#id'). Click (función (evento) {
if (event.target == this) {
// Haz algo
}
})
Análisis: el evento variable en el controlador de eventos guarda el objeto de evento. La propiedad Event.Target contiene el elemento objetivo del evento. Esta propiedad se especifica en la API DOM, pero no lo implementan todos los navegadores. JQuery hace extensiones necesarias a este objeto de evento para que esta propiedad se pueda usar en cualquier navegador. Con .Target, es posible determinar el elemento en el DOM que primero recibe el evento (es decir, el elemento que realmente se hace clic). Además, sabemos que esto se refiere al elemento DOM que maneja los eventos, por lo que podemos escribir el código anterior.
Sin embargo, se recomienda usar return false, si jQuery une eventos.