在eventlistener中获取e.target子的索引

Question

我究竟如何获得e.target的索引？ IndexOf不会工作，我不想使用Array.prototype属性。那么获取目标元素索引的最佳方法是什么？

基本上元素是一个包含一堆div的容器。如果我将鼠标悬停在div上，我想得到它的索引。

element.addEventListener("mouseover", someEvent, false);


function someEvent(e) {
    if (e.target !== e.currentTarget) {
        // get the index of the hovered element here
    }
    e.stopPropagation();
}

我明确表示我不想使用Array.prototype，因此链接不重复。

顺便说一下，这里有一个jsfiddle https://jsfiddle.net/nbjve593/

Answer 1

由于mouseover事件没有index属性且您不想使用Array.prototype方法，因此这里有另一种选择

var els = document.querySelectorAll('#container-id div');

for(i=0; i < els.length; i++) {

  els[i].index = i;

  els[i].addEventListener('mouseover', function(e) {
    
    e.target.innerHTML = e.target.index;

  }, false);
}

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<强>更新

如果你有数以千计的子元素，你可能还需要Array.prototype.indexOf。

此版本使用children代替childNodes，以避免获取所有文本节点。

var el = document.getElementById('container-id');

  el.addEventListener('mouseover', function(e) {
    
    var p = e.target.parentElement;
    var index = Array.prototype.indexOf.call(p.children, e.target);
    
    if (e.target !== el) {
      e.target.innerHTML = index;
    }

  }, false);

#container-id div {
  background: yellow;
  margin: 10px;
  height: 20px;
}

<div id="container-id">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

初始来源：Finding DOM node index