javascript - 有没有更好的方法来调用和放置这个点击处理函数？

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!")
});

标签： javascript