jquery - 获取鼠标指针下方的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 方法绑定到 body：

<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>