獲取鼠標指針下的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>