O mecanismo de bolha JS refere -se se um elemento define o evento A, como um evento de clique.
Conforme mostrado no exemplo a seguir:
A cópia do código é a seguinte:
<html>
<script type = "text/javascript" src = "jQuery-1.7.1.js"> </script>
<Cript>
função ialertDouble (e) {
alerta ('Innerdouble');
Stopbubble (e);
}
função ialertThree (e) {
alerta ('InnerThree');
Stopbubbledouble (e);
}
função stopbubble (e) {
var evt = e || window.event;
EVT.STOPPROPAGATION?
}
função stopbubblebledouble (e) {
var evt = e || window.event;
EVT.STOPPROPAGATION?
evt.preventDefault (); // bloqueia o comportamento padrão do navegador para que o link não salte
}
$ (function () {
// Método 1
//$ pos
// alert ('Innerfour');
// event.stopPropagation ();
// event.preventDefault ();
//});
// Método 2
$ ('#jQuerytest'). Clique (function () {
alerta ('Innerfour');
retornar falso;
});
});
</script>
<div onclick = "alert ('sem');"> sem
<div onclick = "alert ('meio');"> meio
<div onclick = "alert ('interno');"> interno </div>
<div onclick = "ialertDouble (event)"> inerdouble </div>
<p> <a href = 'http: //www.baidu.com' onclick = "ialertThree (event)"> InnerThree </a> </p>
<p id = 'jQuerytest'> <a href = 'http: //www.baidu.com'> Innerfour </a> </p>
</div>
</div>
</html>
Quando você clica em Inner, 'Inner', 'Middle' e 'Without', aparecerá por sua vez. Esta é a bolha do evento.
Intuitivamente falando, esse é o caso, porque a área mais interna está no nó pai.
De fato, muitas vezes, não queremos que os eventos borbulhem, porque isso desencadeará vários eventos ao mesmo tempo.
Próximo: Vamos clicar no InnerDouble. Você descobrirá que ela não é borbulhada porque ela chamou o método Stopbubble () no Method MethodertDouble ().
Mas se for um link, descobriremos que ele também impedirá bolhas, mas ele saltará, que é o comportamento padrão do navegador. Ele precisa ser bloqueado usando o método DevetDefault (). Para detalhes, você pode verificar o ialertThree ().
Atualmente, as pessoas convencionais usam o jQuery para vincular eventos de cliques, o que é muito mais simples.
Podemos passar no evento de parâmetro ao clicar no evento e depois diretamente
event.stopPropagation ();
event.preventDefault (); // Nenhum link é necessário para adicionar isso.
Isso é tudo.
A estrutura é boa, mas na verdade existe um retorno mais simples.
[Veja o código detalhado acima, lembre -se de carregar jQuery.js. 】
De fato, você também pode adicionar julgamentos a cada evento de clique:
A cópia do código é a seguinte:
$ ('#id'). Clique (função (event) {
if (event.target == this) {
// Faça algo
}
})
Análise: O evento variável no manipulador de eventos salva o objeto de evento. A propriedade Event.Target detém o elemento de destino do evento. Esta propriedade é especificada na API DOM, mas não é implementada por todos os navegadores. O jQuery faz as extensões necessárias para este objeto de evento para que essa propriedade possa ser usada em qualquer navegador. Com o .Target, é possível determinar o elemento no DOM que primeiro recebe o evento (ou seja, o elemento que realmente é clicado). Além disso, sabemos que isso se refere ao elemento DOM que lida com eventos, para que possamos escrever o código acima.
No entanto, é recomendável usar o retorno falso, se o jQuery ligar eventos.