代码之家 › 专栏 › 技术社区 › fencepencil

单击具有多个元素但单独[关闭]的数组上的事件

javascript

fencepencil · 技术社区 · 6 年前

我试着用一个 for...of 循环,但需要数组中的每个元素都是一个单独的单击事件(而不是捕获所有元素),而不使用jquery。

这是我到目前为止所拥有的…

const dataScrollTo = document.querySelectorAll('[data-scroll-to]');
let ss = 1000;
let o = 0;

const scrollMe = function scrollMe() {
    for (const el of dataScrollTo) {
        const trigger = el.getAttribute('data-scroll-to');
        const target = document.getElementById(trigger);
        const dsoGet = el.getAttribute('data-scroll-offset');
        const dssGet = el.getAttribute('data-scroll-speed');

        target.scrollIntoView({
                behavior: 'smooth'
        });

        if (dsoGet) {
            o = dsoGet;
        }
        if (dssGet) {
            ss = dssGet;
        }
    }
};
document.addEventListener('click', scrollMe);

和html(有一些类似的导航div)。

<div>
  <a class="icon-link" data-scroll-to="research" data-scroll-offset="60">
  </a>
</div>

1 回复 | 直到 6 年前

Rory O'Kane Erce 6 年前

您应该将事件侦听器添加到每个元素,而不是 document . 听者可以使用 this 看哪一个元素被点击了。

function scrollMe() {
    const el = this;
    const trigger = el.getAttribute('data-scroll-to');
    const target = document.getElementById(trigger);
    const dsoGet = el.getAttribute('data-scroll-offset');
    const dssGet = el.getAttribute('data-scroll-speed');

    target.scrollIntoView({
            behavior: 'smooth'
    });

    if (dsoGet) {
        o = dsoGet;
    }
    if (dssGet) {
        ss = dssGet;
    }
}

dataScrollTo.forEach(el => el.addEventListener("click", scrollMe));

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前