При использовании event.target.getAttribute() для элемента ‹button› он возвращает нуль (по-видимому) случайным образом?

У меня есть ряд элементов на моей странице, которым я даю класс "ссылка на страницу" и атрибут "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);
        });
    }
}

Это заставляет все элементы с классом «ссылка на страницу» прокручиваться до элемента с идентификатором, указанным в атрибуте «dest».

Он отлично работает со всеми моими элементами «ссылка на страницу», кроме одного, который является элементом кнопки. Метод 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?

Спасибо!


person Tor    schedule 17.01.2019    source источник
comment
Это все еще происходит, когда вы используете const PAGE_LINKS = Array.from(document.getElementsByClassName("page-link")); вместо этого? getElementsByClassName возвращает HTMLCollection, который является активным списком; поэтому, когда какой-либо элемент .page-link изменяется, PAGE_LINKS может быть затронут и видоизменен.   -  person Sebastian Simon    schedule 17.01.2019
comment
@Xufox спасибо за ваш вклад! Да, он по-прежнему выдает ошибку при использовании вашей строки.   -  person Tor    schedule 17.01.2019
comment
Если вы нажмете на один из элементов <span> или <i>, event.target не будет иметь атрибута dest. Вместо этого используйте this или event.currentTarget.   -  person Bergi    schedule 17.01.2019
comment
@Берги, спасибо! Изменение «target» на «currentTarget», похоже, устранило проблему. Надо будет почитать о разнице между ними.   -  person Tor    schedule 17.01.2019