How to prevent click happen on child element?

Question

I have a problem with the click event is being received on the child instead of the parent element. At the moment click event is happening on span element instead of link element.

I've searched a few similar SO questions and found out about EventBubling and how to prevent it, but unfortunately, it didn't work for me.

HTML

        <div class="container">
            <div class="list">
                <a href="#" data="data-1">
                    <span>Text 1</span>
                </a>
            </div>
            <div class="list">
                <a href="#" data="data-2">
                    <span>Text 2</span>
                </a>
            </div>
            <div class="list">
                <a href="#" data="data-3">
                    <span>Text 3</span>
                </a>
            </div>
        </div>

JS

const list = document.querySelectorAll('.list > a');

Array.from(list).forEach((el) =>
    el.addEventListener('click', (e) => {
        //e.preventDefault();
        e.stopPropagation();
        const dataAttr = e.target.getAttribute('data');
        console.log(dataAttr);
    })
);

Answer 1

Use e.currentTarget instead of the e.target.

e.currentTarget.getAttribute('data');

Also read: What is the exact difference between currentTarget property and target property in JavaScript

As explained in the above answer:

target is the element that triggered the event (e.g., the user clicked Blockquote on) currentTarget is the element that the event listener is attached to.

Working code below

const list = document.querySelectorAll('.list a');
//console.log(list);

Array.from(list).forEach((el) =>
  el.addEventListener('click', (e) => {
    //e.preventDefault();
    e.stopPropagation();
    const dataAttr = e.currentTarget.getAttribute('data');
    console.log(dataAttr);
  })
);

<div class="list">
  <a href="#" data="data-1">
    <span>Text 1</span>
  </a>
</div>
<div class="list">
  <a href="#" data="data-2">
    <span>Text 2</span>
  </a>
</div>
<div class="list">
  <a href="#" data="data-3">
    <span>Text 3</span>
  </a>
</div>

Answer 2

Propagation works differently than you think it does.

What you want is to always get the .closest() a-tag, regardless of which child-element you clicked. And then you get it's data-attribute

const list = document.querySelectorAll('.list > a');

Array.from(list).forEach((el) =>
    el.addEventListener('click', (e) => {
        //e.preventDefault();
        e.stopPropagation();
        const dataAttr = e.target.closest('a').getAttribute('data');
        console.log(dataAttr);
    })
);

<div class="container">
  <div class="list">
    <a href="#" data="data-1">
      <span>Text 1</span>
    </a>
  </div>
  <div class="list">
    <a href="#" data="data-2">
      <span>Text 2</span>
    </a>
  </div>
  <div class="list">
    <a href="#" data="data-3">
      <span>Text 3</span>
    </a>
  </div>
</div>

Answer 3

Since the links you are adding the event handlers to having nothing inside them except the span element, I'm going to assume that you don't actually want to prevent clicks on the span. Instead, you want to know which link was clicked on even if the click was really on the span.

Use currentTarget instead of target.

currentTarget will give you the element to which the event handler is bound instead of the element that actually received the click.