Question

我是JQUERY的新手，我已将少量DIV元素置于“CANVAS”元素下。单击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>

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

1 个答案: