Javascript＆＃34; NetworkError：500内部服务器错误＆＃34;在...比较

Question

我对javascript有一个问题，当用户点击鼠标，保持并移动它时，下面的函数将跟踪鼠标移动。我有另一个函数，它将在某些间隔检查中重绘画布，或者当用户基于ghostCanvasRedraw == true标志在画布上更改某些内容时。但是，当我尝试检查当前鼠标指针是否在我绘制的矩形内时，发生以下错误：

  

NetworkError：500内部服务器错误

触发重绘的功能如下。我希望在..循环中的if比较是罪魁祸首。请帮助＆amp;你的建议表示赞赏。感谢。

    function addMouseMoveEvent(canvas) {
        EventUtil.addHandler(canvas, 'mousemove', function(event) {
            event = EventUtil.getEvent(event);
            var rect = canvas.getBoundingClientRect();
            mouseX = event.clientX - rect.left;
            mouseY = event.clientY - rect.top;

            if (!isDragging) {
                console.log('Mouse move coordinate on Pdf document: ' + mouseX + ', ' + mouseY);
            }
            else if (isDragging) {
                console.log('Mouse drag coordinate on Pdf document: ' + mouseX + ', ' + mouseY);

                for (var i in boxes) {

                    if (mouseX > boxes[i].x && mouseX < boxes[i].x + boxes[i].w && mouseY > boxes[i].y && mouseY < boxes[i].y + boxes[i].h) {
                        boxes[i].x = mouseX - boxes[i].w / 2;
                        boxes[i].y = mouseY - boxes[i].h / 2;
                        ghostCanvasRedraw = true;

                        console.log('Box in dragging [' + boxes[i].x + ', ' + boxes[i].y + ', ' + boxes[i].w + ', ' + boxes[i].h + ']');
                    }
                }
            }
        });
    } 

Boxes是一个包含box对象的数组。添加了框对象和原型：

    function Box() {
        this.x = 0;
        this.y = 0;
        this.w = 1; 
        this.h = 1;
        this.lineWidth = 2;
        this.lineColor = 'blue';
        this.fill = '#444444';  
    }

    Box.prototype = {
            // Draw rectangle
            drawRectangle : function(ctx) {
                console.log('Box in drawing [' + this.x + ', ' + this.y + ', ' + this.w + ', ' + this.h + ']');

                ctx.beginPath();
                ctx.strokeStyle = this.lineColor;
                ctx.lineWidth = this.lineWidth;
                ctx.fillStyle = this.fill;
                // For box transparency
                ctx.globalAlpha = 0.2;
                // Draw filled rectangle
                ctx.fillRect(this.x, this.y, this.w, this.h);
                // Draw stroke for rectangle
                ctx.strokeRect(this.x, this.y, this.w, this.h);

                // Draw selection handles
                var half = 3;

                // 0  1  2
                // 3     4
                // 5  6  7
                selectionHandles = [];

                // top left, middle, right
                selectionHandles.push({x : this.x - half, y : this.y - half});
                selectionHandles.push({x : this.x + this.w / 2 - half, y : this.y - half});
                selectionHandles.push({x : this.x + this.w - half, y : this.y - half});

                //middle left
                selectionHandles.push({x : this.x - half, y : this.y + this.h / 2 - half});

                //middle right
                selectionHandles.push({x : this.x + this.w - half, y : this.y + this.h / 2 - half});

                //bottom left, middle, right
                selectionHandles.push({x : this.x + this.w / 2 - half, y : this.y + this.h - half});
                selectionHandles.push({x : this.x - half, y : this.y + this.h - half});
                selectionHandles.push({x : this.x + this.w - half, y : this.y + this.h - half});

                for (var i in selectionHandles) {
                    ctx.fillRect(selectionHandles[i].x, selectionHandles[i].y, 6, 6);
                    i += 1;
            }
        }
    }