绘制线条JavaScript-单击问题

我对创建的代码有问题。我遇到的问题是，当我点击停止画线时，它有50%的几率第一次工作，但是如果你只画直线，它似乎工作正常，但我希望它从任何方向工作，我不100%确定为什么它不工作线

（我正在使用1.12.4 jquery，因为我正在将它添加到WordPress中，这就是它运行的内容）

$（函数（）{
var x1=null，
y1=零；
var offsetX=0，
offsetY=0；
var moveLineId=“moveLine”；
函数createLine（x1、y1、x2、y2、id）{
变量长度=数学sqrt（（（x1-x2）*（x1-x2））+（（y1-y2）*（y1-y2））；
变量角度=数学atan2（y2-y1，x2-x1）*180/数学PI；
变量变换='旋转（'+角度+'度）'；
偏移量x=（x1>x2）？x2:x1；
偏移量=（y1>y2）？y2:y1；
变量行=$（''）
.appendTo（“#demo”）
.addClass（'行'）
.css({
'位置'：'绝对'，
“-webkit转换”：转换，
“-moz变换”：变换，
“变换”：变换
})
.宽度（长度）
.抵消({
左：offsetX，
顶部：越位
});
if（id！=null）line.attr（'id'，id）；
回流线；
}
$（“#演示”）。单击（函数（事件）{
$（“.line”）.removeAttr（'id'）；
var x=event.pageX，
y=event.pageY；
如果（x1==null）{
x1=x；
y1=y；
}否则{
x1=y1=null；
}
})
.delegate（'.line'，click'，函数（事件）{
event.preventDefault（）；
$（this.toggleClass（'active'）；
x1=y1=null；
返回false；
});
$（'#demo'）.mousemove（函数（事件）{
var x=event.pageX，
y=event.pageY；
如果（x1！=null）{
$（“#”+moveLineId）.remove（）；
createLine（x1、y1、x、y、moveLineId）
}否则{
x1=y1=null；
}
})
});
div.line{
变换原点：0.100%；
高度：3倍；
/*线宽为3*/
背景：#000；
/*黑色填料*/
}
#演示{
边框：1px虚线#ccc；
高度：400px；
}
拐角处的分区{
变换原点：0%0%；
}

单击两点以绘制一条线：
不要单击
事件，而是收听
mousedown
和
mouseup
事件以开始/停止绘制线


$（函数（）{
var x1=null，
y1=零；
var offsetX=0，
offsetY=0；
var moveLineId=“moveLine”；
//在此处使用“mousedown”，以便在您按下鼠标按钮时立即注册行首。
$（'#demo'）。在（“鼠标向下”，函数（事件）{
$（“.line”）.removeAttr（'id'）；
var x=event.pageX，
y=event.pageY；
如果（x1==null）{
x1=x；
y1=y；
}否则{
x1=y1=null；
}
})
.delegate（'.line'，mouseup'，函数（事件）{
//在此处使用“mouseup”，以便在释放鼠标按钮后立即注册行的开头。
event.preventDefault（）；
$（this.toggleClass（'active'）；
x1=y1=null；
返回false；
});
$（'#demo'）.mousemove（函数（事件）{
var x=event.pageX，
y=event.pageY；
如果（x1！=null）{
$（“#”+moveLineId）.remove（）；
createLine（x1、y1、x、y、moveLineId）
}否则{
x1=y1=null；
}
});
函数createLine（x1、y1、x2、y2、id）{
变量长度=数学sqrt（（（x1-x2）*（x1-x2））+（（y1-y2）*（y1-y2））；
变量角度=数学atan2（y2-y1，x2-x1）*180/数学PI；
变量变换='旋转（'+角度+'度）'；
偏移量x=（x1>x2）？x2:x1；
偏移量=（y1>y2）？y2:y1；
变量行=$（''）
.appendTo（“#demo”）
.addClass（'行'）
.css({
'位置'：'绝对'，
“-webkit转换”：转换，
“-moz变换”：变换，
“变换”：变换
})
.宽度（长度）
.抵消({
左：offsetX，
顶部：越位
});
if（id！=null）line.attr（'id'，id）；
回流线；
}
});
div.line{
变换原点：0.100%；
高度：3倍；
背景：#000；
}
#演示{
边框：1px虚线#ccc；
高度：400px；
}

代码片段对我来说工作正常。工作正常，您只需确保当您第二次单击停止该行时，您的手仍然没有移动代码工作正常。大多数情况下，我不会用第二次点击来完成这一行。Cerburs的答案一直有效。是的，评论说，你必须停止你的手，然后点击，而不是移动你的手时点击（称为拖动而不是点击）OP的问题陈述措词不当-但@Cerburs的答案可能解决了他遇到的任何问题。OP的代码片段已经正常工作了，但这确实有一个额外的好处，那就是可以单击拖动释放，而不是单击twice@ZakariaAcharki/@Epicular：问题是停止绘图的“单击”事件没有一直注册。这是通过使用“mouseup”修复的。为什么你认为停止绘图的“click”事件没有一直注册？！！有时单击的用户会握手。因为在单击时移动光标不会触发“click”事件。然后会触发
mousedown>mousemove>mouseup
。