2

我正在尝试从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/

4

2 回答 2

4

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

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>

于 2020-06-25T18:00:20.050 回答
0

有几种方法可以解决这个问题，具体取决于您希望如何使用每个子元素的索引。我认为使用数据属性通常是一个好方法：

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);
于 2020-06-25T17:59:42.903 回答