Hay problemas de burbujas de eventos y captura de eventos en JavaScript y JQuery Events. El siguiente es un resumen detallado de los dos problemas y sus soluciones.
Las burbujas de eventos son un proceso de burbujas de niños a nodos ancestros;
La captura de eventos es todo lo contrario, y es un proceso desde nodos antepasados hasta nodos infantiles.
Dé un ejemplo de un evento de clic jQuery:
El código es el siguiente:
La copia del código es la siguiente:
<! Doctype html>
<meta charset = "utf-8">
<title> test </title>
<Evista>
<script src = "http://code.jquery.com/jquery-latest.js"> </script>
<script type = "text/javaScript">
$ (function () {
$ ('#clickMe'). Click (function () {
alerta ('hola');
});
$ ('Body'). Click (function () {
alerta ('bebé');
});
});
</script>
</ablo>
<Body>
<div>
<botón tipo = "botón" id = "botón2"> Haga clic en mí </botón>
<botón id = "clickMe"> haga clic </botón>
</div>
</body>
</html>
Fenómeno de burbujas de eventos: haga clic en el botón de "ID = ClickMe", y dos cuadros emergentes, "Hola" y "Baby" aparecerán uno tras otro.
Análisis: Al hacer clic en el botón "ID = ClickMe", se activa el evento de clic en el botón y el botón Los elementos y el cuerpo de los padres, por lo que aparecen dos cuadros uno tras otro, y se produce el llamado fenómeno de burbuja.
Fenómeno de captura de eventos: si hace clic en el Div y el botón que no une el evento de clic, aparecerá el cuadro de diálogo "Baby".
En proyectos reales, queremos prevenir burbujas de eventos y captura de eventos.
Cómo evitar que los eventos burbujeen:
Método 1: Devolver falso en el evento de clic actual;
La copia del código es la siguiente:
$ ('#clickMe'). Click (function () {
alerta ('hola');
devolver falso;
});
Método 2:
La copia del código es la siguiente:
$ ('#clickMe'). Click (función (evento) {
alerta ('hola');
var e = window.event || evento;
if (e.stoppropagation) {// Si se proporciona un objeto de evento, entonces este es un navegador no II
E.stoppropagation ();
}demás{
// Manera compatible con IE para cancelar la burbuja de eventos
window.event.cancelBubble = true;
}
});
Parece que el evento de captura no se puede bloquear