Primero explique la diferencia entre los dos métodos de prevenida y stoppropagation en JS:
¿Cuál es el papel del método PreventDefault? Sabemos, por ejemplo, <a href = "http://www.baidu.com"> Baidu </a>, esto es lo más básico en HTML. .Baidu .. com, este es el comportamiento predeterminado de la etiqueta <a>, y el método PreventDefault es evitar que otras cosas ocurran su comportamiento predeterminado. Ver un párrafo de código y todos entienden:
Copiar código del código de la siguiente manera:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<meta http-oquiv = "content-type" content = "text /html; charset = utf-8" /> />
<title> js prevenir el salto de enlace </title>
<script type = "text/javaScript">
Function stopDefault (e) {
if (e && e.preventDefault)
E.PreventDefault ();
demás
Window.event.returnValue = false;
Devolver falso;
}
</script>
</ablo>
<Body>
<a href = "http://www.baidu.com" id = "testlink"> Baidu </a>
<script type = "text/javaScript">
var test = document.getElementById ('testlink');
test.OnClick = function (e) {{
Alerta ('mi dirección de enlace es:' + this.href + ', pero no saltaré');
stopDefault (e);
}
</script>
</body>
</html>
En este momento, haga clic en el enlace de Baidu, y no abrirá http://www.baidu.com, sino que solo recoja un cuadro de diálogo de alerta.
¿Qué pasa con el método de stoppropagation? Antes de hablar sobre el método de stoppropagation, debe explicarle el agente de eventos JS.
Los proxies de eventos usan dos características que a menudo se ignoran en el incidente de Javasciprt: burbujeo de eventos y elementos objetivo. Cuando se activa un evento en un elemento, por ejemplo, el mouse hace clic en un botón, y el mismo evento se activará en todos los antepasados de ese elemento. Este proceso se llama burbujas de incidentes; Para cualquier caso, sus elementos objetivo son elementos primitivos, y en nuestro ejemplo, pero también el botón. El elemento objetivo aparece en forma de atributos en nuestros objetos de evento. Si usa un agente de eventos, podemos agregar el procesador de eventos a un elemento, esperar a que el evento burbujee desde sus elementos sub -nivel y podemos determinar fácilmente de qué elemento comienza el evento.
El método StopPropagation es evitar que el evento JS burbujee y ver un código.
Copiar código del código de la siguiente manera:
<!
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<Evista>
<title> Prevenir la transmisión de burbujas de incidentes JS (CancelBubble, StopPropagation) </title>
<meta name = "Keywords" Content = "JS, Event Bubbling, CancheBubble, StopPropagation" />
<script>
Function dosomething (obj, evt) {
alerta (obj.id);
var e = (evt)?
if (window.event) {
E.CancelBubble = verdadero;
} Demás {
//e.preventDefault ();
E.stoppropagation ();
}
}
</script>
</ablo>
<Body>
<div id = "parent1" onClick = "alerta (this.id)">
<p> Esto es dolor1 div.
<div id = "child1" onClick = "alerta (this.id)">
<p> Esto es niño1.
</div>
<p> Esto es dolor1 div.
</div>
<Br />
<div id = "parent2" onClick = "alerta (this.id)">
<p> Esto es parent2 div.
<div id = "child2" onClick = "dosomething (este, evento);" >> ">
<p> Esto es niño2.
</div>
<p> Esto es parent2 div.
</div>
</body>
</Html>
Entendamos el código anterior.