Click handler being invoked twice on same element

Question

I have two div elements, inner and outer. I am triggering click event on inner div programmatically only once. But the log shows that the event handler is invoked twice on inner div. Here is the code. Can you please help understand why is this happening. Code is also hosted on codesandbox

const inner = document.querySelector(".inner");
const outer = document.querySelector(".outer");
    
function clk(event) {
  console.log("click");
  console.log(event.target);
}
    
inner.addEventListener("click", clk);
outer.addEventListener("click", clk);
    
inner.click();

<div class="outer" id="div1">
  <div class="inner" id="div2"></div>
</div>

Just like the answers state, it's due to event bubbling. If you want to prevent that from happening you can use `event.stopPropagation()`. — Sebastian Gbudje, Apr 15 '22 at 14:42
note also that if you logged `event.currentTarget` instead of `event.target1, you'd see the "outer" div for the second log - `currentTarget` is always the element the event handler was added to, while `target` is the actual element that the event was triggered on originally. — Robin Zigmond, Apr 15 '22 at 14:51

score 4 · Answer 1 · answered Apr 15 '22 at 14:41

4

add

event.stopPropagation()

to your clk function

answered Apr 15 '22 at 14:41

DCR

14,737
12
52
115

score 3 · Accepted Answer · answered Apr 15 '22 at 14:38

This is because of Event bubbling.

What's happening is :

You tigger the click event on inner.
The event listener of inner is called.
The click event bubbles up to outer.
The event listener of outer is called

The target is inner in both calls to the clk function, because it's a property of the initial event. It doesn't depend on the element the listener is registered on.

score 1 · Answer 3 · answered Apr 15 '22 at 14:35

It happens because you subscribe on outer as well as on inner because of event bubbling effect which is presented in JavaScript(see: https://javascript.info/bubbling-and-capturing). That`s why it is executed on inner and outer element - you added handler for both:

inner.addEventListener("click", clk);
outer.addEventListener("click", clk);

score 1 · Answer 4 · answered Apr 15 '22 at 14:52

1

The event is only triggered once per element. You can see this if you use the currentTarget rather than the target

function clk(event) {
  console.log("click");
  console.log(event.currentTarget);
}

answered Apr 15 '22 at 14:52

Blake Plumb

6,779
3
33
54

Click handler being invoked twice on same element

4 Answers4