鼠标单击事件多次运行并冻结浏览器

Question

我正在创建一个创建散点图的类，允许用户单击某个点以查看具有这些值的实体。我想用香草JS来做这件事。

我正在使用一个事件监听器来检测用户何时点击HTML画布 - 这有效......一段时间。

事件监听器中的代码似乎至少运行3次（当它应该只运行一次时）。单击我的画布几次后，整个浏览器都会锁定。我做错了什么？

这是JavaScript，一开始的if语句是我试图阻止代码多次运行（这不起作用）：

var cv = document.getElementById(mainCanvas.id);
    cv.addEventListener('click', function (e)
    {
        if (scatterPlot.mouseProgress == 1)
        {
            //Mouse is over the canvas
            var mouseX = e.pageX;
            var mouseY = e.pageY;

            //Cycle throug the points to see if the current x/y match
            var show = false;
            var listDesc = [];
            var count = 0;
            var length = range.length;
            for (var i = 0; i < length; i++)
            {
                if (mouseX < range[i].clickRight && mouseX > range[i].clickLeft && mouseY < range[i].clickBottom && mouseY > range[i].clickTop)
                {
                    show = true;
                    listDesc[count] = [];
                    listDesc[count]["desc"] = range[i].description;
                    listDesc[count]["valOne"] = range[i].x;
                    listDesc[count]["valTwo"] = range[i].y;
                    count++;
                }
            }

            //Show the descriptions if needed
            if (show)
            {
                scatterPlot.drawDescriptionBox(mouseX + 10, mouseY + 10, listDesc, mainCanvas);
            }
            else
            {
                //Clear the screen and redraw the graph
                scatterPlot.clearGraph(mainCanvas);
                scatterPlot.plot(range, mainCanvas.id);
            }
        }
        //Stop the mouse down event from progressing
        if (scatterPlot.mouseProgress == 1)
        {
            scatterPlot.mouseProgress = 0;
        }
        else
        {
            scatterPlot.mouseProgress = 1;
        }
    });

    cv.addEventListener('mouseup', function (e)
    {
        scatterPlot.mouseProgress = 0;
    });

这是一个jsfiddle：http://jsfiddle.net/mumwhrm0/