Para impedir a propagação de um evento nas fases de captura e bolha, você chama o Event.stopPropation()método no manipulador de eventos.
Event.stopPropagation();Linguagem de código: CSS ( css )Observe que o event.stopPropagation()método não interrompe nenhum comportamento padrão do elemento, por exemplo, clique no link, caixa de seleção marcada. Se quiser interromper os comportamentos padrão, você pode usar o Event.preventDefault()método.
Suponha que você tenha um botão dentro de um <div>:
<div id="box">
<button class="btn">Register</button>
</div>Linguagem de código: HTML, XML ( xml )Quando você clica no botão, o evento borbulha para o <div>elemento. O código a seguir mostra duas caixas de alerta quando você clica no botão:
const btn = document.querySelector('.btn');
const box = document.querySelector('#box');
btn.addEventListener('click', function (e) {
alert('The button was clicked!');
});
box.addEventListener('click', function (e) {
alert('The box was clicked!');
});Linguagem de código: JavaScript ( javascript )Para evitar que o evento click se propague para <div>o elemento, você chama o stopPropagation()método no manipulador de eventos do botão:
btn.addEventListener('click', function (e) {
alert('The button was clicked!');
e.stopPropagation();
});Linguagem de código: JavaScript ( javascript )Agora, apenas uma caixa de alerta é exibida quando você clica no botão.
