javascript - Get index of e.target child inside eventlistener - Stack Overflow

admin管理员组

文章数量:1390896

How exactly do I get the index of e.target? IndexOf wont work and I dont want to use the Array.prototype property. So what is the best way to get the index of the target element?

Basically element is a container with a bunch of divs. If I hover over a div I want to get its index.

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


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

I explicitely stated that I dont want to use Array.prototype so the link is not a duplicate.

By the way, here a jsfiddle /

How exactly do I get the index of e.target? IndexOf wont work and I dont want to use the Array.prototype property. So what is the best way to get the index of the target element?

Basically element is a container with a bunch of divs. If I hover over a div I want to get its index.

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


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

I explicitely stated that I dont want to use Array.prototype so the link is not a duplicate.

By the way, here a jsfiddle https://jsfiddle/nbjve593/

• javascript

Share Improve this question Follow edited Feb 13, 2016 at 20:43 Asperger asked Feb 13, 2016 at 19:49 AspergerAsperger 3,2221111 gold badges5959 silver badges106106 bronze badges 18

• 4 Get the index in relation to what exactly ? – adeneo Commented Feb 13, 2016 at 19:50
• @adeneo I thought the code makes it clear. Basically element is a container with a bunch of divs. If I hover over a div I want to get its index. – Asperger Commented Feb 13, 2016 at 19:53
• 2 ...of the what now? So the index in relation to what then, when using the "bubbling effect" ? – adeneo Commented Feb 13, 2016 at 19:56
• 1 Possible duplicate of JavaScript DOM: Find Element Index In Container – Asons Commented Feb 13, 2016 at 19:57
• 2 Can you please show your HTML? That way we can see what you're trying mouse-over, and the element(s) of which you're trying to find the index. As it is you're trying to explain code to us, as well as explaining your intent//requirement. Reduce your work: show us your minimal reproducible example code. Also, why don't you want to use Array.prototype.slice.call()? If you can explain the requirements that might help us to provide better answers (although, admittedly, sometimes using an approach you don't want to use remains the best way, but not always). – David Thomas Commented Feb 13, 2016 at 19:59

 |  Show 13 more ments

2 Answers 2

Sorted by: Reset to default 1

As the mouseover event doesn't have an index property and you don't want to use Array.prototype methods, here is an alternative

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>

Update

If you have thousands of child elements you might want Array.prototype.indexOf anyway.

This version use children instead of childNodes, to avoid getting all the text nodes.

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>

Initial source: Finding DOM node index

Use in the table element what you want to use. When you use the table element, you have the index of the column or row in the table in the DOM.

本文标签： javascriptGet index of etarget child inside eventlistenerStack Overflow