在<button>元素上使用event.target.getAttribute()时,它是否随机返回null(貌似)?

时间:2019-01-17 10:12:18

标签: javascript events null getattribute

页面中有很多元素,它们赋予了类“页面链接”和属性“ dest ='#some-id'”。

然后我有这个javascript代码段:

window.onload = function() {
    setPageLinks();
}

function setPageLinks() {
    const PAGE_LINKS = document.getElementsByClassName("page-link");
    for (let i = 0; i < PAGE_LINKS.length; i++) {
        PAGE_LINKS[i].addEventListener("click", function(event) {
            let linkTarget = event.target.getAttribute("dest");
            //alert(linkTarget);
            $('html, body').animate({
                scrollTop: $(linkTarget).offset().top
            }, 600);
        });
    }
}

它使所有具有“ page-link”类的元素滚动到具有“ dest”属性中指定的ID的元素。

除了我的所有“页面链接”元素都碰巧是按钮元素之外,它都可以正常工作。该属性上的getAttribute方法偶尔(似乎是随机的)在单击时返回null。在Firefox中不会发生这种情况,但在Chrome,Edge和Opera中会发生这种情况。

这是我的按钮元素:

<button type="button" class="page-link" dest="#about">
    <span class="front-btn-text">View my work</span>
    <span class="front-btn-arrow"><i class="fas fa-arrow-right"></i></span>
</button>

任何人都可以告诉我为什么会发生此错误,如何处理(以及为什么在Firefox中不会发生此错误?

谢谢!

0 个答案:

没有答案