有没有更好的方法来调用和放置此单击处理程序函数？

Question

我有一个绘画功能，目的是提供元素的运动和交互性。在此功能中，我放置了一个用于单击的事件监听器。

该事件监听器应该如何工作？

按下后，事件侦听器将获得其单击点的x和y值，以及距单击点100像素的元素（圆圈） 将其颜色更改为白色。

尽管有效，但仅考虑数组的第一个元素。我试图查看是否是由于计数器初始化引起的，但似乎并非如此。

注意：我正在使用一个名为“ strip []”的数组。

//7.EVENT LISTENER- 

rect.node.addEventListener('click', function(ev) {
    mouseState = true;
    console.log("Got you!");
    counter = 0;
    counter++;

    //Determine the distance beetween two points with simple equation:         
    dist = distance(ev.offsetX, ev.offsetY, strip[counter].xpos, strip[counter].ypos);

    //SHOW DISTANCE   
    console.log("bombayah! " + dist);
    console.log("disk:" + counter);

    //7. PRINT THE MESSAGE  AND CHANGE COLOR  
    if (dist > 100) {
        console.log(">100- MAYOR");
        strip[counter].attr({
            "fill": "white",
            "stroke-width": 0
        });
    }
    if (dist < 100 || mouseState != true) {
        console.log("<100 MENOR");
        strip[counter].attr({
            "fill": colorString,
            "stroke-width": 0
        });
    }
    //******************************************* 
});

rect.node.addEventListener('mouseup', function(ev) {
    mouseState = false;
    console.log("Up!")
});