Javascript jquery鼠标选择无法正常工作

我正在尝试使用jQuery创建一个鼠标选择，这就是我正在尝试的，它可以工作，但有一个错误：如果我开始选择并在圆圈中移动鼠标，选择将中断。。。我怎样才能解决它

distanceStart=0；
距离=0；
mousedown=false；
$（窗口）.on（'mousedown'，函数（e）{
e、 预防默认值（）；
mousedown=true；
distanceXStart=e.clientX；
distanceYStart=e.clientY；
$div=$（''{
班级：“班级”
}).附于（“主体”）；
});
$（窗口）.on（'mouseup'，函数（e）{
e、 预防默认值（）；
mousedown=false；
$div.remove（）；
});
$（窗口）.on（'mousemove'，函数（e）{
e、 预防默认值（）；
如果（鼠标向下）{
距离xend=e.clientX；
distanceYEnd=e.clientY；
distanceX=（distanceXEnd-distanceXStart）；
distanceY=（distanceYEnd-distanceYStart）；
如果（距离x>0&&distanceY>0）{
$div.css({
“左”：（e.clientX-（distanceX/*/2*/），
‘top’：（e.clientY-（distance/*/2*/），
“宽度”：距离x，
“高度”：距离
});
}否则
if（距离x<0&&distanceY<0）{
$div.css({
“左”：e.clientX，
“顶部”：e.clientY，
“宽度”：（1-距离x），
“高度”：（1-距离）
});
}
}
});

您就快到了，您只是忘记了要检查的另外两个条件：

distanceX<0

或

distanceY<0

这是我在第二次

结束后添加的内容，如果
结束：

// ... stuff
else if ( distanceX < 0 ) {
    $div.css({
        'left': e.clientX,
        'top': e.clientY - distanceY,
        'width': (1 - distanceX),
        'height': distanceY
    });
}
else if ( distanceY < 0 ) {
    $div.css({
        'left': e.clientX - distanceX,
        'top': e.clientY,
        'width': distanceX,
        'height': (1 - distanceY)
    });
}

/。。。东西
else if（距离x<0）{
$div.css({
“左”：e.clientX，
“top”：例如clientY-distance，
“宽度”：（1-距离x），
“高度”：距离
});
}
else if（距离<0）{
$div.css({
“左”：e.clientX-distanceX，
“顶部”：e.clientY，
“宽度”：距离x，
“高度”：（1-距离）
});
}
您就快到了，您只是忘记了要检查的另外两个条件：
distanceX<0
或
distanceY<0


这是我在第二次
结束后添加的内容，如果
结束：

// ... stuff
else if ( distanceX < 0 ) {
    $div.css({
        'left': e.clientX,
        'top': e.clientY - distanceY,
        'width': (1 - distanceX),
        'height': distanceY
    });
}
else if ( distanceY < 0 ) {
    $div.css({
        'left': e.clientX - distanceX,
        'top': e.clientY,
        'width': distanceX,
        'height': (1 - distanceY)
    });
}

/。。。东西
else if（距离x<0）{
$div.css({
“左”：e.clientX，
“top”：例如clientY-distance，
“宽度”：（1-距离x），
“高度”：距离
});
}
else if（距离<0）{
$div.css({
“左”：e.clientX-distanceX，
“顶部”：e.clientY，
“宽度”：距离x，
“高度”：（1-距离）
});
}
您可以使用HTML5
画布
完成这种类型的交互

Canvas非常适合这种类型的东西，因为它可以让您完全控制要显示的形状，并且执行得非常好，因为不涉及DOM操作

使用canvas
fillRect
，您只需要开始x、开始y、宽度和高度。我使用了以下代码：

  var leftmost = Math.min(start_x, coords.x)
  var rightmost = Math.max(start_x, coords.x)
  var lowest = Math.min(start_y, coords.y)
  var highest = Math.max(start_y, coords.y)
  ctx.fillRect(leftmost, lowest, rightmost - leftmost, highest - lowest)

您可以使用HTML5
canvas
完成这种类型的交互

Canvas非常适合这种类型的东西，因为它可以让您完全控制要显示的形状，并且执行得非常好，因为不涉及DOM操作

使用canvas
fillRect
，您只需要开始x、开始y、宽度和高度。我使用了以下代码：

  var leftmost = Math.min(start_x, coords.x)
  var rightmost = Math.max(start_x, coords.x)
  var lowest = Math.min(start_y, coords.y)
  var highest = Math.max(start_y, coords.y)
  ctx.fillRect(leftmost, lowest, rightmost - leftmost, highest - lowest)

有点模糊。再解释一下你所说的选择中断是什么意思？有点模糊。再解释一下你所说的选择中断是什么意思？