时间戳

首页 > 解决方案 > 如何从 MouseEvent 对象中获取单击元素的索引号

javascript - 如何从 MouseEvent 对象中获取单击元素的索引号

问题描述

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

标签： javascriptdommouseeventqueryselector

解决方案

如果您可能希望索引的所有元素具有相同的父级，则可以在的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>

推荐阅读