单击包含多个元素但单独存在的数组上的事件
单击包含多个元素但单独存在的数组上的事件
提问于 2018-06-09 05:16:08
我尝试使用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
Stack Overflow用户
回答已采纳
发布于 2018-06-09 05:25:19
您应该将事件侦听器添加到每个元素，而不是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));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50768487
复制相关文章
相似问题