如何从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/
解决方案
如果您希望索引的所有元素都具有相同的父项,则可以对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>
相关文章