7 replies

Event bubbling in JS

Hello guys, sorry to disturb you all; in order to stop an event from propagating to its parent element, we can use the following code:

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

My question is, does the order in which we write the line e.stopPropagation(); matters please

KP-C

Kevin Powell - Community•2y ago•

7 replies

Faker

Event bubbling in JS

Hello guys, sorry to disturb you all; in order to stop an event from propagating to its parent element, we can use the following code:

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

const container = document.querySelector('#container');
const output = document.querySelector('#content');
const btn = document.querySelector('button');

function handleClick(e){
    // e.stopPropagation();
    output.textContent += `You clicked on the ${e.currentTarget.tagName} element!\n`;
    // e.stopPropagation();
}

document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
btn.addEventListener('click', handleClick);

My question is, does the order in which we write the line e.stopPropagation(); matters please

Event bubbling in JS

Similar Threads

Event bubbling in JS

Similar Threads

Similar Threads

Similar Threads