Html Dojo gfx:onmousemove连接到一个正在碰撞onmouseup的形状？

我试图在Dojo的gfx中实现一个橡皮筋选择框，并使用Canvas作为渲染器。我的意图是在鼠标按下并拖动时绘制选择框，然后在鼠标释放后消失。不幸的是，我遇到了一个问题

JSFIDLE示例：

主要问题是onmousemove中的某个地方（或与之相关）：

whiteRect.connect（“onmousemove”，函数（e）{
如果（isMouseDown）{
if（whiteRect.groupSelector_382;）{
pStat.innerHTML=“拖动…”；
调试（“拖动…”）；
e、 停止即时复制（）；
e、 预防默认值（）；
var ex=（e.x？e.x:e.clientX）；
var-ey=（e.y？e.y:e.clientY）；
如果（组选择器）{
//还尝试了getShape、编辑该形状和在groupSelector上设置形状——相同
//但是，行为。
var rectX=（ex-cnvDiv.offsetLeft

如果我按住鼠标事件所连接的形状/组（上例中的白色方块）中的鼠标左键并开始拖动，则框将在拖动运动后开始绘制。当我松开鼠标时，有时盒子会消失，有时不会。如果没有，则框将继续绘制，并按照我拖动时定义的方式跟随鼠标移动

在jsFiddle中，如果您在画布下观看console.debug或段落报告器，您会看到有时候，当您释放鼠标时onmouseup不会触发（我也检查了mouseup，但这有相同的问题）。如果onmouseup从不开火，onmousemove将继续开火。如果再次单击，有时会触发一系列完整的鼠标单击（向下、向上、单击和移动），从而使绘制的矩形消失。不过，有时候这种情况不会发生，onmousemove会继续开火。如果在drag/onmousemove变为“卡住”后单击，并且什么也没有发生，则这些事件的报告器没有调试行或更改，因此，就好像除了onmousemove之外的所有鼠标事件都被压制了一样。我试着加入StopRopagation、stopImmediatePropagation和preventDefault，但都没用。我还尝试使用Dojo事件的停止，但这并没有改变行为

为了在onmousemove中重新绘制长方体，我尝试了“getShape->edit properties->setShape”以及删除形状并创建一个全新的形状；这两种方法都不能解决问题，它们之间也没有明显的区别

我使用的是Dojo1.8.3，这在Chrome（v25）和Firefox（v19）中都会发生，渲染器是Canvas或SVG

---

想法？我是不是遗漏了一些明显的东西？

已经解决了。问题在于，当您决定停止拖动形状时，onmouseup事件可能会在基础/附着的形状或正在拖动的形状上触发。它是随机的，具体取决于光标位置，但如果拖动过程中没有偏移或延迟，则倾向于绘制的形状。（dojox/gfx中的Moveable.js和Mover.js为我指明了正确的方向。）

在尝试使其工作的过程中，我将我的框更改为路径，这似乎性能更好，但不是必需的

关键是生成一个通用的“onMouseUp”函数，然后从发起人形状的onMouseUp以及拖动形状的onMouseUp调用该函数。我的例子是草率的，但我希望它能让人明白这一点

jsFiddle：

关键代码：

// General method to clear out a selector if
// one was being drawn.
var selectorMouseUp = function(e) {
    reporter.innerHTML = "onmouseup";
    isMouseDown = false;
    whiteRect.groupSelector_ = null;
    if(groupSelector) {
        if(selectorUp) {
            groupSelector.disconnect(selectorUp);
        }               
        surface.remove(groupSelector);
        groupSelector = null;
    }
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
};

// Mouseup event for the background/workspace
whiteRect.connect("onmouseup",function(e){
    selectorMouseUp(e);
});

// Make a selector as a path on the surface
// and attach a mouseup to it
var makeSelector = function(x,y,w,h) {
    groupSelector = surface.createPath()
        .moveTo(x,y)
        .hLineTo(x+w).vLineTo(y+h).hLineTo(x).vLineTo(y)
        .setStroke({color: "blue", width: 3})
        .closePath();
    // Attach the same mouseup method as the workspace/background
    selectorUp = groupSelector.connect("onmouseup",function(e){
        reporter.innerHTML = "onmouseup (selector)";
        selectorMouseUp(e);
    });         
};

bigRect.connect("onmousemove",function(e){  
    if(isMouseDown) {
        if(bigRect.groupSelector_) {
            var ex = e.clientX;
            var ey = e.clientY;

            reporter.innerHTML = "dragging at " + ex+","+ey;

            var downX = bigRect.groupSelector_.x;
            var downY = bigRect.groupSelector_.y;
            var leadingX = (ex - grn.offsetLeft < downX ? ex - grn.offsetLeft : downX);
            var leadingY = (ey - grn.offsetTop < downY ? ey - grn.offsetTop : downY);
            var selWidth = Math.abs(ex - grn.offsetLeft - downX);
            var selHeight = Math.abs(ey - grn.offsetTop - downY);

            if(groupSelector) {
                // If there's already a selector being drawn, get rid of it.
                groupSelector.disconnect(selectorUp);
                surface.remove(groupSelector);
            }
            // Draw the current selector
            makeSelector(leadingX,leadingY,selWidth,selHeight);
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();
        }
    }
});

//在以下情况下清除选择器的常规方法
//一个正在抽签。
var selectorMouseUp=函数（e）{
reporter.innerHTML=“onmouseup”；
isMouseDown=错误；
whiteRect.groupSelector uz=null；
如果（组选择器）{
如果（选择向上）{
组选择器。断开（选择器向上）；
}               
表面。移除（组选择器）；
groupSelector=null；
}
e、 停止即时复制（）；
e、 停止传播（）；
e、 预防默认值（）；
};
//后台/工作区的鼠标悬停事件
connect（“onmouseup”，函数（e）{
选择器鼠标（e）；
});
//将选择器作为曲面上的路径
//并在上面贴上鼠标
var makeSelector=函数（x，y，w，h）{
groupSelector=surface.createPath（）
.moveTo（x，y）
.hLineTo（x+w）.vLineTo（y+h）.hLineTo（x）.vLineTo（y）
.setStroke（{颜色：“蓝色”，宽度：3}）
.closePath（）；
//附加与工作区/背景相同的mouseup方法
selectorUp=groupSelector.connect（“onmouseup”，函数（e）{
reporter.innerHTML=“onmouseup（选择器）”；
选择器鼠标（e）；
});         
};
连接（“onmousemove”，函数（e）{
如果（isMouseDown）{
if（bigRect.groupSelector_3;）{
var ex=e.clientX；
var ey=e.clientY；
// General method to clear out a selector if
// one was being drawn.
var selectorMouseUp = function(e) {
    reporter.innerHTML = "onmouseup";
    isMouseDown = false;
    whiteRect.groupSelector_ = null;
    if(groupSelector) {
        if(selectorUp) {
            groupSelector.disconnect(selectorUp);
        }               
        surface.remove(groupSelector);
        groupSelector = null;
    }
    e.stopImmediatePropagation();
    e.stopPropagation();
    e.preventDefault();
};

// Mouseup event for the background/workspace
whiteRect.connect("onmouseup",function(e){
    selectorMouseUp(e);
});

// Make a selector as a path on the surface
// and attach a mouseup to it
var makeSelector = function(x,y,w,h) {
    groupSelector = surface.createPath()
        .moveTo(x,y)
        .hLineTo(x+w).vLineTo(y+h).hLineTo(x).vLineTo(y)
        .setStroke({color: "blue", width: 3})
        .closePath();
    // Attach the same mouseup method as the workspace/background
    selectorUp = groupSelector.connect("onmouseup",function(e){
        reporter.innerHTML = "onmouseup (selector)";
        selectorMouseUp(e);
    });         
};

bigRect.connect("onmousemove",function(e){  
    if(isMouseDown) {
        if(bigRect.groupSelector_) {
            var ex = e.clientX;
            var ey = e.clientY;

            reporter.innerHTML = "dragging at " + ex+","+ey;

            var downX = bigRect.groupSelector_.x;
            var downY = bigRect.groupSelector_.y;
            var leadingX = (ex - grn.offsetLeft < downX ? ex - grn.offsetLeft : downX);
            var leadingY = (ey - grn.offsetTop < downY ? ey - grn.offsetTop : downY);
            var selWidth = Math.abs(ex - grn.offsetLeft - downX);
            var selHeight = Math.abs(ey - grn.offsetTop - downY);

            if(groupSelector) {
                // If there's already a selector being drawn, get rid of it.
                groupSelector.disconnect(selectorUp);
                surface.remove(groupSelector);
            }
            // Draw the current selector
            makeSelector(leadingX,leadingY,selWidth,selHeight);
            e.stopImmediatePropagation();
            e.stopPropagation();
            e.preventDefault();
        }
    }
});