entorno de desarrollo
ganar 10
elemento-ui "2.8.2"
Vue 2.9.6
Introducción al burbujeo de eventos
Como se muestra en la figura siguiente, cuando hacemos clic en un elemento de la página, se generará un evento de clic y el evento progresará capa por capa desde el exterior hacia el interior (fase de captura de eventos, 1->2->3-> 4 en el camino), cuando el elemento objetivo captura Cuando se alcanza el evento objetivo, responderá al evento y lo pasará capa por capa desde adentro hacia afuera (etapa burbujeante de evento, 4-> 5-> 6-> 7 en la figura), este es un evento burbujeante. Formalmente, debido al mecanismo de propagación, cuando el usuario hace clic en el div del elemento de destino en la figura, los elementos en las áreas de eventos 5, 6 y 7 responderán todos al evento de clic (si tienen la capacidad de responder a los eventos)
Experimento 1
<plantilla>
<div>
<div id="aplicación" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
</div>
</plantilla>
<script>
exportación predeterminada {
métodos: {
diversión1() {
console.log("Hiciste clic en div1");
},
diversión2() {
console.log("Se hizo clic en div2");
},
diversión3() {
console.log("Se hizo clic en div3");
},
diversión4() {
console.log("Se hizo clic en div4");
}
}
};
</script>
Los resultados experimentales son los siguientes:
Experimento 2
Sobre la base del Experimento 1, modifique el código de la siguiente manera, @click = "fun3" se cambia a @click.stop = "fun3"
<div id="aplicación" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click.stop="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
Resultados experimentales:
Haga clic en div4, la salida es la siguiente:
Experimento 3
Sobre la base del Experimento 1, modifique el código de la siguiente manera, @click="fun4" se cambia a @click.stop="fun4"
<div id="aplicación" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click.stop="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
Resultados experimentales:
en conclusión
Los experimentos completos 1, 2 y 3 muestran que si desea evitar que el evento burbujee de un elemento (es decir, el evento solo es válido para este elemento), solo necesita agregar el modificador .stop al evento del elemento. .