如何从 MouseEvent 对象获取被点击元素的索引号

Question

我正在尝试从 MouseEvent 对象中获取被单击元素的索引。当我进入控制台单击事件对象“路径”属性并将鼠标悬停到第一个数组项时，它标记了实际单击的元素。

我想知道引擎怎么知道点击了哪个？因为 event.path[0] 选择器不包含被点击元素的索引号。

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

jsfiddle: https://jsfiddle.net/9n3f7mcr/

Answer 1

根据您希望如何使用每个子元素的索引，有几种方法可以解决这个问题。我认为 using data attributes 通常是一个好的方法：

HTML

<div id="container">
  <div data-id="1">1z</div>
  <div data-id="2">2z</div>
  <div data-id="3">3z</div>
  <div data-id="4">4z</div>
  <div data-id="5">5z</div>
  <div data-id="6">6z</div>
</div>

JS

const container = document.getElementById("container");

function handleClick(evt) {
  const childNode = evt.target.closest("div");
  console.log(childNode.dataset.id);
}

container.addEventListener("click", handleClick, false);

Answer 2

您可以在 event.target 的父项的子项上使用 Array#indexOf，如果您可能希望其索引的所有元素都具有相同的父项。

document.addEventListener('click', function (e) {
  var target = e.target;
  var parent = target.parentNode;
  var index = [].indexOf.call(parent.children, target);
  console.log("index:", index);
});

<div id="container">
<div>1z</div>
<div>2z</div>
<div>3z</div>
<div>4z</div>
<div>5z</div>
<div>6z</div>
</div>

如何从 MouseEvent 对象获取被点击元素的索引号

How to get index number of clicked element from MouseEvent object

javascript

dom

mouseevent

queryselector