单击按钮时尝试使用 indexOf 查找数组的索引值答案

【问题标题】：Trying to use indexOf to find index value of the array when the buttons are clicked单击按钮时尝试使用 indexOf 查找数组的索引值
【发布时间】：2017-03-26 09:08:06
【问题描述】：

我将 Adobe Animate CC 用于画布项目。我有一个数组，我将事件侦听器分配给这样的：

for(var i = 0; i < navBtnArray.length; i++ ){
navBtnArray[i].addEventListener("click", navigationControls);
}

我想弄清楚的是如何捕获在数组中单击的按钮的索引值。我试过这样：

function navigationControls(e){

console.log(navBtnArray.indexOf(this));
}

但这一直返回-1。这又是 Animate CC，所以我无法访问 jQuery。 Animate 使用 CreateJS 和 EaselJS 库。我曾经在 AS3 中使用 indexOf，但它的工作方式似乎并不完全相同。

【问题讨论】：

我可以通过使用 currentTarget 属性来完成这项工作。 console.log(navBtnArray.indexOf(e.currentTarget) + "这是按钮数组索引");

标签： javascript arrays createjs easeljs animate-cc

【解决方案1】：

为此，您可以使用：

function navigationControls(e){
    console.log(navBtnArray.indexOf(e.target));
}

如果这仍然不起作用并且indexOf 无法比较此类对象，您可以尝试为按钮对象添加一个额外的属性，例如：

for(var i = 0; i < navBtnArray.length; i++ ){
     navBtnArray[i].addEventListener("click", navigationControls);
     navBtnArray[i].index = i;
}

然后做：

function navigationControls(e){
    console.log(e.target.index);
}

【讨论】：

您可能需要考虑使用e.currentTarget 而不是target，以防按钮有子级。您还可以使用 btn.mouseChildren=false 关闭鼠标子级。
是的，确实如此。虽然，我认为这是一个具体情况，具体取决于图形是如何完成的，因为有时我会从使用e.currentTarget 的形状孩子那里得到奇怪的回报。

【解决方案2】：

试试这个：

 var navBtnArray = document.getElementsByClassName('demo');
for(var i = 0; i < navBtnArray.length; i++ ){
(function(index){
      navBtnArray[i].onclick = function(){
              console.log(index)  ;
        }    
    })(i);

}

<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>
<button class="demo">hi</button>

【讨论】：

这看起来像是一种纯 JavaScript 方法。我正在使用 Animate 平台，并在那里使用 Animate 内部的 create js/easelJS 框架。我找到了这篇文章，但似乎没有解决我的问题：createjs.com/docs/easeljs/classes/…