绘制多行JavaScript-并非每次点击都有效

Question

我在创建此代码时遇到了问题。我遇到的问题是，当我单击以停止绘制线条时，它有50％的机会会在第一次运行，这与某些设备不同，您必须单击多次以阻止绘制线条，而不是100 ％确定原因。

（我使用1.12.4 jquery作为即时消息将其添加到WordPress中，这就是运行中的问题）

$(function() {
  var x1 = null,
    y1 = null;
  var offsetX = 0,
    offsetY = 0;
  
  var moveLineId = "moveLine";

  function createLine(x1, y1, x2, y2, id) {

    var length = Math.sqrt(((x1 - x2) * (x1 - x2)) + ((y1 - y2) * (y1 - y2)));
    var angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    var transform = 'rotate(' + angle + 'deg)';

    offsetX = (x1 > x2) ? x2 : x1;
    offsetY = (y1 > y2) ? y2 : y1;

    var line = $('<div>')
      .appendTo('#demo')
      .addClass('line')
      .css({
        'position': 'absolute',
        '-webkit-transform': transform,
        '-moz-transform': transform,
        'transform': transform
      })
      .width(length)
      .offset({
        left: offsetX,
        top: offsetY
      });

    if(id != null) line.attr('id', id);

    return line;
  }

  $('#demo').click(function(event) {
      $(".line").removeAttr('id');
      var x = event.pageX,
        y = event.pageY;

      if (x1 == null) {
        x1 = x;
        y1 = y;
      } else {
        x1 = y1 = null;
      }
    })
    .delegate('.line', 'click', function(event) {
      event.preventDefault();
      $(this).toggleClass('active');
      x1 = y1 = null;
      return false;
    });
    

  $('#demo').mousemove(function(event) {
      var x = event.pageX,
        y = event.pageY;
        
      
      
      if (x1 != null) {
        $("#" + moveLineId).remove();
        createLine(x1, y1, x, y, moveLineId)
      } else {
        x1 = y1 = null;
      }
    })
    
});

div.line {
  transform-origin: 0 100%;
  height: 3px;
  /* Line width of 3 */
  background: #000;
  /* Black fill */
}

#demo {
  border: 1px dashed #ccc;
  height: 400px;
}

div.transforming-on-corner {
  transform-origin: 0% 0%;
}

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  
<h3> click two point to draw a line :</h3>
<div id="demo" class="wide">

</div>