Kinetic JS丢失了鼠标事件，随机绘制矩形

Question

使用KineticJS我必须用鼠标事件绘制一个矩形。 矩形必须识别一个区域，我可以选择位于里面的所有形状。 我正在使用不同的组来定位地形和线条。

我的问题是Mouseup事件并不总是被触发，特别是使用IE。 我试过几次，但可能我犯了一些错误。

有什么想法吗？

这里是我的小提琴http://jsfiddle.net/ErikIce/bBtS7/

        var stage = null;
        var mainLayer = null;
        var infoLayer = null;
        var debugLayer = null;
        var groupSelected = null;
        var groupDesign = null;
        var groupLinkLines = null;
        var rectSelector = null;
        var objectsSelected = new Array();
        var width = 400;
        var height = 400;
        var selectorInitX = 0;
        var selectorInitY = 0;

        //Lock semaphores
        var lockObjectsSelector = false;
        var lockSelBoxObjectsSelector = false;
        var lockInDragObjectsSelector = false;

        // Build stage and node tree
        stage = new Kinetic.Stage({
            container: 'container',
            width: width,
            height: height
        });

        mainLayer = new Kinetic.Layer();

        groupSelected = new Kinetic.Group({
            name: 'GroupSelected',
            draggable: true,
            x: 0,
            y: 0,
            height: stage.attrs.height,
            width: stage.attrs.width
        });

        groupDesign = new Kinetic.Group({
            name: 'GroupDesign',
            draggable: false,
            x: 0,
            y: 0,
            height: stage.attrs.height,
            width: stage.attrs.width
        });

        groupLinkLines = new Kinetic.Group({
            name: 'GroupLinkLines',
            draggable: false,
            x: 0,
            y: 0,
            height: stage.attrs.height,
            width: stage.attrs.width
        });

        var objectsSelector = new Kinetic.Rect({
            x: 0,
            y: 0,
            height: stage.attrs.height,
            width: stage.attrs.width,
            fill: 'transparent',
            draggable: false,
            name: 'objectsSelector'
        });

        // build node tree
        groupDesign.add(objectsSelector);
        mainLayer.add(groupDesign);
        mainLayer.add(groupLinkLines);
        mainLayer.add(groupSelected);
        stage.add(mainLayer);

        // Add events      
        objectsSelector.on('mousedown', function (evt) {
            lockObjectsSelector = true;
            //alert('event objectsSelector mousedown fired');
        });

        groupDesign.on('mousedown', function (e) {

            if (objectsSelected.length > 0) {

                objectsSelected.length = 0;
                objectsSelected = new Array();
                groupSelected.moveToBottom();
            }
            //alert('event groupDesign mousedown fired');
        });

        groupDesign.on('mousemove', function (e) {

            if (lockObjectsSelector) {
                SetSelRectPosition(e);
                //alert('event groupDesign mousemove fired');
            }

        });

        groupDesign.on('mouseup', function (e) {

            if (lockObjectsSelector) {
                lockObjectsSelector = false;

                if (rectSelector !== null) rectSelector.remove();
                rectSelector = null;
                lockSelBoxObjectsSelector = false;
                groupSelected.moveToTop();
                mainLayer.draw();
            }
            alert('event groupDesign mouseup fired');

        });

        function SetSelRectPosition(e) {

            if (lockObjectsSelector && !lockInDragObjectsSelector) {
                lockInDragObjectsSelector = true;
                var canvas = mainLayer.getCanvas();
                var mousepos = stage.getPointerPosition();
                var x = mousepos.x;
                var y = mousepos.y;

                if (!lockSelBoxObjectsSelector) {
                    selectorInitX = x;
                    selectorInitY = y;

                    //create the selection rectangle
                    rectSelector = new Kinetic.Rect({
                        x: selectorInitX,
                        y: selectorInitY,
                        height: 1,
                        width: 1,
                        fill: 'transparent',
                        stroke: 'black',
                        strokeWidth: 1
                    });
                    groupDesign.add(rectSelector);
                    mainLayer.draw();

                    lockSelBoxObjectsSelector = true;
                }
                else {
                    var newHeight = 0;
                    var newWidth = 0;
                    var newX = 0;
                    var newY = 0;

                    if (x > selectorInitX) newX = selectorInitX; else newX = x;
                    if (y > selectorInitY) newY = selectorInitY; else newY = y;

                    newHeight = Math.abs(Math.abs(y) - Math.abs(selectorInitY));
                    newWidth = Math.abs(Math.abs(x) - Math.abs(selectorInitX));

                    rectSelector.setHeight(newHeight);
                    rectSelector.setWidth(newWidth);
                    rectSelector.setX(newX);
                    rectSelector.setY(newY);

                    mainLayer.draw();
                }
            }
            lockInDragObjectsSelector = false;
        }