单击 JavaScript 中的 <a> 时未获取 href 属性

Question

问题是当 <a> 标签中有一个元素时，我没有得到 <a> 的 href :

代码：

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.map(a => {
    a.onclick = (e) => {
        console.log(e.target.href)
        e.preventDefault()
        // If I press on <a> that has class name 'google', the code console.logs the href, but if I press on <a> that has class name 'vezani-tekst-holder flex-column', it console logs undefined!
    }
})

<main id="article" style="padding: 0px !important; margin: 0px !important;">
    <div class="container content-container" style="background-color: white; margin-top: 0px;">
        <div class="grid-right">
            <article class="big-part" id="article-part" style="padding: 0px !important; margin: 0px !important;">
                <div class="post-text-holder">
                    <div class="post-content post-content-holder">
                        
                        <!-- First  a tag, works fine -->
                        <a class='google' href='https://www.google.com'>Hello Google</a>

                        <!-- Second  a tag, gives undefined -->
                        <a href='https://www.facebook.com'
                            class='vezani-tekst-holder flex-column'>\n
                            <img src='https://www.someimage.jpg'>\n
                            <h3 class='pretitle text'>Text Header</h3>\n <h1 class='small-title'>Small text</h1>\n
                        </a>

                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

如果我按下具有 class 名称 'google' 的 <a>，代码 console.logs href，但是如果我按下具有 <a> 的 <a> class 名称 'vezani-tekst-holder flex-column'，控制台记录未定义！

我也试过：

console.log(e.srcElement.attributes.href.textContent);

和

console.log(e.originalTarget.attributes.href.value);

我是 JS 的初学者，所以任何帮助将不胜感激。

Answer 1

Event#target 指的是触发事件的元素。在您的案例中，哪个是 <img /> 或 <h1 /> 或 <h3 /> 元素。

尝试使用 Event#currentTarget 获取已注册事件侦听器的元素。

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.forEach(a => {
    a.onclick = (e) => {
        console.log(e.currentTarget.href)
        e.preventDefault()
    }
})

Answer 2

针对事件监听器中的事件使用该元素。另一句话，你不需要使用地图。你可以使用 forEach aganis.

const $elems = document.querySelectorAll('.content-container a')
var elems = Array.from($elems)
elems.forEach(a => {
    a.onclick = (e) => {
        console.log(a.href)
        e.preventDefault()
        // If I press on <a> that has class name 'google', the code console.logs the href, but if I press on <a> that has class name 'vezani-tekst-holder flex-column', it console logs undefined!
    }
})

<main id="article" style="padding: 0px !important; margin: 0px !important;">
    <div class="container content-container" style="background-color: white; margin-top: 0px;">
        <div class="grid-right">
            <article class="big-part" id="article-part" style="padding: 0px !important; margin: 0px !important;">
                <div class="post-text-holder">
                    <div class="post-content post-content-holder">
                        
                        <!-- First  a tag, works fine -->
                        <a class='google' href='https://www.google.com'>Hello Google</a>

                        <!-- Second  a tag, gives undefined -->
                        <a href='https://www.facebook.com'
                            class='vezani-tekst-holder flex-column'>\n
                            <img src='https://www.someimage.jpg'>\n
                            <h3 class='pretitle text'>Text Header</h3>\n <h1 class='small-title'>Small text</h1>\n
                        </a>

                    </div>
                </div>
            </article>
        </div>
    </div>
</main>

单击 JavaScript 中的 <a> 时未获取 href 属性

Not getting href attribute when clicking on <a> in JavaScript

javascript

html

javascript-objects