获取鼠标指针下的DIV列表（鼠标事件）

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 method机体：

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