获取鼠标指针下的DIV列表(mouseup事件)

Question

我是JQUERY的新手，我在"CANVAS"元素下放置了几个div元素。单击DIV元素时，将开始绘制线条。当我在另一个DIV中释放鼠标时，它将停止（线将与那些DIV元素一起绘制）。现在我想补充一点，如果我在DIV之外释放鼠标，它应该会清除图形。我想不出捕捉这一事件的正确方法来清除图纸。请帮帮我。

HTML元素结构

 <div id="content">
    <div id="draganddrop" >
        <div id="drag_1" class="hitbox"></div>
        <div id="drag_2" class="hitbox"></div>
        <div id="drop_1" class="hitbox">
        <div id="drop_2" class="hitbox">
    </div>
    <canvas id="linedrawing" style="pointer-events:none" class="border"></canvas>
</div>

点击事件

<script>
    $(function() { 
        $("#drag_1").mousedown(startDrawing);
        $("#drag_2").mousedown(startDrawing);
        $("#drop_1").mousedown(startDrawing);
        $("#drop_2").mousedown(startDrawing);
        $("#draganddrop").mousemove(updateDrawing);
        $("#draganddrop").mouseup(finishDrawing);
    });
</script>

如果用户在"drag_1，drag_2，drop_1，drop_2"外释放鼠标，我想清除图形。请帮助我

Answer 1

将clear方法绑定到主体：

<script>
    $(function() { 
        $("#drag_1").mousedown(startDrawing);
        $("#drag_2").mousedown(startDrawing);
        $("#drop_1").mousedown(startDrawing);
        $("#drop_2").mousedown(startDrawing);
        $("#draganddrop").mousemove(updateDrawing);
        $("#draganddrop").mouseup(finishDrawing);
        $("body").mouseup(clearDrawing);
    });
</script>