How to prevent click happen on child element?

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