Question

我有一个问题。虽然我正在检查复选框是否检查然后调用rect（）函数，但是即使取消选中也会调用rect（）。请你帮忙。我已在功能函数OnChangeCheckbox（复选框）

中检查了复选框的选中/取消选中

<html lang="en">
    <head>
        <script>
            $(function() {
                $( "#check" ).button();
                $( "#format" ).buttonset();
            });
        </script>

        <style>
            #format { margin-top: 2em; }
        </style>

        <script>
            function OnChangeCheckbox (checkbox) {
                if (checkbox.checked == true) {
                    rect();
                }
                else if(!checkbox.checked)
                {
                    alert("Uncheck");             
                }
            }
        </script>

        <script>
            function rect() {
                var canvas = document.getElementById('canvasSignature'),
                ctx = canvas.getContext('2d'),
                rect = {},
                drag = false;
                function init() {
                    canvas.addEventListener('mousedown', mouseDown, false);
                    canvas.addEventListener('mouseup', mouseUp, false);
                    canvas.addEventListener('mousemove', mouseMove, false);
                }

                function mouseDown(e) {
                    rect.startX = e.pageX - this.offsetLeft;
                    rect.startY = e.pageY - this.offsetTop;
                    drag = true;
                }


                function mouseUp() {
                    drag = false;
                }


                function mouseMove(e) {
                    if (drag) {
                        rect.w = (e.pageX - this.offsetLeft) - rect.startX;
                        rect.h = (e.pageY - this.offsetTop) - rect.startY ;
                        //ctx.clearRect(0,0,canvas.width,canvas.height);
                        draw();
                    }
                }


                function draw() 
                {
                    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
                }

                init();
            }
        </script>

    </head>

    <div id="format">
        <input type="checkbox" id="check1"  onclick="OnChangeCheckbox(this)" /><label for="check1">Rectangle</label>
    </div>

    <div id="canvasDiv">
        <canvas id="canvasSignature" width="580px" height="788px" style="border:2px solid    #000; background: #FFF;"></canvas>
    </div>



</html>

Answer 1

尝试

 if (checkbox.checked === true) {
         rect();
}

即使取消选中复选框，我仍然会跟随JS一直停留在某一点上，调用rect（）函数

1 个答案: