Primeiro, explique a diferença entre os dois métodos de prevenção e StopPropagation em JS:
Qual é o papel do método PreventDefault? Sabemos, por exemplo, <a href = "http://www.baidu.com"> Baidu </a>, esta é a coisa mais básica no HTML. .Baidu .. COM, esse é o comportamento padrão do rótulo <a>, e o método PreventDefault é impedir que outras coisas ocorram seu comportamento padrão. Veja um parágrafo de código e todos entendem:
Copie o código do código da seguinte forma:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" /> />
<Título> JS Prevent Link Jumping </title>
<script type = "text/javascript">
Função stopdefault (e) {
if (e && e.preventDefault)
E.PreventDefault ();
outro
window.Event.ReturnValue = false;
Retornar falso;
}
</script>
</head>
<Body>
<a href = "http://www.baidu.com" id = "testlink"> Baidu </a>
<script type = "text/javascript">
var teste = document.getElementById ('testlink');
test.OnClick = function (e) {{
Alerta ('meu endereço de link é:' + this.href + ', mas não vou pular.');
StopDefault (e);
}
</script>
</body>
</html>
No momento, clique no link do Baidu e você não abrirá http://www.baidu.com, mas basta exibir uma caixa de diálogo alerta.
E quanto ao método de stoppropagation? Antes de falar sobre o método de parada, você deve explicar o agente de eventos JS.
Os proxies de eventos usam dois recursos que geralmente são ignorados no incidente JavaSciprt: Bubbling de Eventos e elementos de destino. Quando um evento em um elemento é acionado, por exemplo, o mouse clica em um botão e o mesmo evento será acionado em todos os ancestrais desse elemento. Esse processo é chamado de incidente; este incidente está borbulhando até o topo da árvore Dom a partir dos elementos originais. Para qualquer evento, seus elementos de destino são elementos primitivos e, em nosso exemplo, mas também o botão. O elemento de destino aparece na forma de atributos em nossos objetos de evento. Se você usar um agente de eventos, podemos adicionar o processador de eventos a um elemento, aguarde o evento borbulhar de seus elementos de sub -nível e pode determinar facilmente qual elemento o evento começa.
O método StopPropagation é impedir que o evento JS borbulhe e veja um código.
Copie o código do código da seguinte forma:
<!
<Html xmlns = "http://www.w3.org/1999/xhtml" lang = "gb2312">
<head>
<title> Evite a transmissão de bolhas de incidentes JS (cancelbubble, StopPropagation) </title>
<meta name = "Keywords" Content = "JS, Evento Bubling, CancelBubble, StopPropagation" />
<Cript>
Função doSomething (obj, evt) {
alerta (obj.id);
var e = (evt)?
if (window.event) {
E.Cancelbubble = True;
} Outro {
//e.preventDefault ();
E.StopPropagation ();
}
}
</script>
</head>
<Body>
<div id = "parent1" onclick = "alert (this.id)">
<p> Isso é dor1 Div
<div id = "child1" onclick = "alert (this.id)">
<p> Isto é Child1
</div>
<p> Isso é dor1 Div
</div>
<br />
<div id = "parent2" onclick = "alert (this.id)">
<p> Este é o pai 2 div
<div id = "child2" onclick = "doSomething (this, evento);" >> ">
<p> Isso é criança2
</div>
<p> Este é o pai 2 div
</div>
</body>
</html>
Vamos entender o código acima.