捕获的坐标不正确

Question

要绘制一条线，我需要捕捉坐标（x，y）。我正在尝试时，捕获的坐标不正确！当我点击cont时，捕获的X坐标不正确。它在右边。这可能是什么原因？

<div class="modal fade" id="goal" tabindex="-1" role="dialog" aria-labelledby="mygoal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <h4 class="modal-title text-center" id="mygoal">Characteristics</h4>
                <div class="modal-body">
                    <form class='form-horizontal'>

                            <label class='checbox-inline'>
                                <input type='checkbox' id='assist'>Assist
                            </label>
                            <label class='checbox-inline'>
                                <input type='checkbox' id='intentional'>Intentional
                            </label>
                            <label class='checbox-inline'>
                                <input type='checkbox' id='deflected'>Deflected
                            </label>
                            <label class='checbox-inline'>
                                <input type='checkbox' id='owngoal'>Own goal
                            </label>

                    </form>
                    <div id='cont'></div> <!-- CAPTURE FIELD -->

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
              </div>
          </div>
        </div>
    </div>

jquery：

<script type="text/javascript">
        var count = 0;
        var x1,y1;
        $(document).ready(function() {
            $('.timer>mark').timer();
            $('#cont').click(function(event) {
                //alert(event.pageX + ',' + event.pageY);
                if(count == 0) {//alert(event.pageX + ',' + event.pageY);
                    x1 = event.pageX;
                    y1 = event.pageY;
                    $('#cont').line(x1,y1,x1+1,y1+1,{color:"white", style: "dashed"});
                }
                if(count == 1) {
                    // draw line
                    $('#cont').line(x1,y1,event.pageX,event.pageY,{color:"blue", style: "dashed"});
                    $('#cont').line(event.pageX,event.pageY,event.pageX+1,event.pageY+1,{color:"white", style: "dashed"});
                }
                count++;
                if(count == 2) count = 0;


            });
        });
    </script>

CSS for cont：

#cont {
width: 400px;
height: 200px;
background-color: green;
}

红点显示实际点击次数，但白点显示捕获的点击次数。这可能是什么原因？