Aprendí por primera vez que burbujear es cuando el ratón está fuera y cuando el ratón se va.
Uno admite el burbujeo y el otro no admite el burbujeo.
1. Primero veamos la diferencia entre estos dos eventos.
2. ¿Qué sucede cuando se habla de "burbujeo" ?
3. Aplicaciones burbujeantes
4. Desactivación del burbujeo
El burbujeo se trata de la relación entre padre e hijo, luego crearemos directamente un div padre y un div hijo.
Luego, haga los eventos onmouseout y onmouseleave al padre respectivamente.
Movemos el mouse desde el exterior a través del padre al niño, y del niño al padre.
Puedes ver la diferencia entre los dos.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 400px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 220px;
height: 220px;
background-color: brown;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onmouseleave=function(){
f_01();
}
function f_01(){
ms_02.style.backgroundColor="black";
}
}
</script>
</body>
Bien, ahora todo el mundo conoce un pequeño incidente burbujeante.
A continuación, hablamos de " burbujeo ", (¿has burbujeado hoy?)
Podemos entenderlo con la ayuda del burbujeo en la realidad, burbujear significa extenderse hacia arriba desde el nivel del niño al nivel de los padres, lo que se llama burbujeo.
Esta comprensión es relativamente seca, usamos el código para ayudar a comprender.
Anidamos cinco divs. (De afuera hacia adentro: 1-2-3-4-5)
El resultado que obtenemos es la propagación desde el nivel del niño hacia arriba.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 600px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 100%;
height: 260px;
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
#ms_03{
width: 100%;
height: 200px;
background-color: #28edf7;
display: flex;
justify-content: center;
align-items: center;
}
#ms_04{
width: 100%;
height: 160px;
background-color: #f7863a;
display: flex;
justify-content: center;
align-items: center;
}
#ms_05{
width: 100%;
height: 100px;
background-color: #f71010;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
<div id="ms_03">
<div id="ms_04">
<div id="ms_05">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onclick=function(){
f_01();
}
ms_02.onclick=function(){
f_02();
}
ms_03.onclick=function(){
f_03();
}
ms_04.onclick=function(){
f_04();
}
ms_05.onclick=function(){
f_05();
}
function f_01(){
alert("我是第1个div");
}
function f_02(){
alert("我是第2个div");
}
function f_03(){
alert("我是第3个div");
}
function f_04(){
alert("我是第4个div");
}
function f_05(){
alert("我是第5个div");
}
}
</script>
</body>
Todos deberían haber visto algunas pistas a estas alturas.
A continuación, hablemos de su aplicación.
Si queremos recopilar la información de la función del niño, ¿se puede recopilar en la aplicación principal? Este es también el burbujeo predeterminado.
A continuación, hablemos de cómo evitar el burbujeo.
event.stopPropagation ();
No se distribuirán más eventos.
El evento de terminación se propaga aún más durante la captura, el procesamiento de destino o la fase de propagación del proceso de propagación. Después de llamar a este método, se llamará al controlador en el nodo que maneja el evento y el evento ya no se enviará a otros nodos.
Medios de propagación (multiplicar; multiplicar; difundir; propaganda; herencia; difundir),
Desde el sentido literal, no nos resulta difícil de entender, se trata de evitar la transmisión y propagación del incidente, ¿verdad?
Podemos entender que agregar e.stopPropagation () puede hacerlo independiente del flujo burbujeante del padre original.
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#ms_01{
width: 600px;
height: 400px;
background-color: #d3f017;
display: flex;
justify-content: center;
align-items: center;
}
#ms_02{
width: 100%;
height: 260px;
background-color: brown;
display: flex;
justify-content: center;
align-items: center;
}
#ms_03{
width: 100%;
height: 200px;
background-color: #28edf7;
display: flex;
justify-content: center;
align-items: center;
}
#ms_04{
width: 100%;
height: 160px;
background-color: #f7863a;
display: flex;
justify-content: center;
align-items: center;
}
#ms_05{
width: 100%;
height: 100px;
background-color: #f71010;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="ms_01">
<div id="ms_02">
<div id="ms_03">
<div id="ms_04">
<div id="ms_05">
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
var ms_01=document.getElementById("ms_01");
ms_01.onclick=function(){
f_01();
}
ms_02.onclick=function(){
f_02();
}
ms_03.onclick=function(){
f_03();
}
ms_04.onclick=function(){
f_04();
}
ms_05.onclick=function(){
event.stopPropagation();
f_05();
}
function f_01(){
alert("我是第1个div");
}
function f_02(){
alert("我是第2个div");
}
function f_03(){
alert("我是第3个div");
}
function f_04(){
alert("我是第4个div");
}
function f_05(){
alert("我是第5个div");
}
}
</script>
</body>
¡A estas alturas todo el mundo debería tener un conocimiento básico!
Deja una pregunta para todos,
[Suponga que dejamos 3 y hacemos clic en 5, ¿qué pasará? 】
Respuesta: 5——4——3, detente
[Suponga que salimos de 3 y 5 y hacemos clic en 5 o 4. ¿Qué pasará? 】
Respuesta: de 5, deténgase
Respuesta: 4-3, detente
¿Descubrimos que también se separará de su propio subconjunto?
