在 MouseEvent 上找到 NodeList 中的确切位置
Find exact Position in NodeList on MouseEvent
似乎很明显,但找不到 solution.I 有几个 Div 具有相同的 class,当您将鼠标悬停在它们上面时,我想知道您是哪一个准确悬停,作为 NodeList 位置值。
HTML
<div id="summary">
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
</div>
JS
let articles = document.querySelectorAll(".articles");
for (let x of articles) {
x.addEventListener('mouseenter', (e) => {
p = Exact Position in Nodelist??
console.log(articles[p]);
});
}
谢谢。
你应该获取父节点的子节点并找到它的索引,如下所示。
试试这个
let articles = document.querySelectorAll(".articles");
for (let x of articles) {
x.addEventListener("mouseenter", (e) => {
console.log([...e.target.parentNode.children].indexOf(e.target));
});
}
代码沙箱 => https://codesandbox.io/s/young-frost-x6u1x?file=/src/index.js
这是我想出的一个简单的解决方案:
let articles = document.querySelectorAll(".articles");
for (let [position, article] of articles.entries()) {
article.addEventListener('mouseenter', (e) => {
console.log(position) // Exact Position in Nodelist
console.log(articles[position]) // The Node hovered
});
}
希望我的帮助有用。
您可以在父级上使用鼠标悬停,这样您只会添加一个侦听器:
let articles = document.querySelectorAll(".articles");
var summary = document.getElementById("summary");
summary.addEventListener("mouseover", (e) => {
if (e.target.classList.contains("articles")) {
let position = Array.from(e.target.parentNode.children).indexOf(e.target);
console.log(position,articles[position]);
}
});
.articles {
width: 100px;
height: 100px;
border: solid 1px red;
}
<div id="summary">
<div class="articles">a</div>
<div class="articles">b</div>
<div class="articles">c</div>
<div class="articles">d</div>
<div class="articles">e</div>
<div class="articles">f</div>
<div class="articles">g</div>
</div>
似乎很明显,但找不到 solution.I 有几个 Div 具有相同的 class,当您将鼠标悬停在它们上面时,我想知道您是哪一个准确悬停,作为 NodeList 位置值。
HTML
<div id="summary">
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
<div class="articles"></div>
</div>
JS
let articles = document.querySelectorAll(".articles");
for (let x of articles) {
x.addEventListener('mouseenter', (e) => {
p = Exact Position in Nodelist??
console.log(articles[p]);
});
}
谢谢。
你应该获取父节点的子节点并找到它的索引,如下所示。
试试这个
let articles = document.querySelectorAll(".articles");
for (let x of articles) {
x.addEventListener("mouseenter", (e) => {
console.log([...e.target.parentNode.children].indexOf(e.target));
});
}
代码沙箱 => https://codesandbox.io/s/young-frost-x6u1x?file=/src/index.js
这是我想出的一个简单的解决方案:
let articles = document.querySelectorAll(".articles");
for (let [position, article] of articles.entries()) {
article.addEventListener('mouseenter', (e) => {
console.log(position) // Exact Position in Nodelist
console.log(articles[position]) // The Node hovered
});
}
希望我的帮助有用。
您可以在父级上使用鼠标悬停,这样您只会添加一个侦听器:
let articles = document.querySelectorAll(".articles");
var summary = document.getElementById("summary");
summary.addEventListener("mouseover", (e) => {
if (e.target.classList.contains("articles")) {
let position = Array.from(e.target.parentNode.children).indexOf(e.target);
console.log(position,articles[position]);
}
});
.articles {
width: 100px;
height: 100px;
border: solid 1px red;
}
<div id="summary">
<div class="articles">a</div>
<div class="articles">b</div>
<div class="articles">c</div>
<div class="articles">d</div>
<div class="articles">e</div>
<div class="articles">f</div>
<div class="articles">g</div>
</div>