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);
    })
);

[`pointer-events: none;`](//developer.mozilla.org/en/docs/Web/CSS/pointer-events)? — Sebastian Simon, Mar 18 '22 at 09:59
Every commentor totally misses the point of the question, they don't want to prevent clicks. OP want's to always get the data-value of the a-tag — cloned, Mar 18 '22 at 10:00

score 2 · Accepted Answer · answered Mar 18 '22 at 10:00

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>

score 1 · Answer 2 · answered Mar 18 '22 at 09:59

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>

score 1 · Answer 3 · answered Mar 18 '22 at 09:59

1

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.

answered Mar 18 '22 at 09:59

Quentin

914,110
126
1,211
1,335

Like your solution, it's even cleaner than mine. Will leave mine up tough, it might still be useful (if only for slightly different use-cases) – cloned Mar 18 '22 at 10:01

How to prevent click happen on child element?

3 Answers3