在JavaScript中处理点击和拖动事件

我正在使用纯JavaScript开发一个使用

canvas

元素的简单绘画应用程序。当用户拖动屏幕时，应用程序会创建圆圈。其次，双击一个圆将删除特定的圆。第三，我想在点击时拖动一个圆

var画布，
背景，形状，
Draging=false，draggingtoMove=false，dragstopped=0，
dragStartLocation，dragEndLocation，
快照
numShapes变种；
函数初始化（）{
numShapes=100；
形状=[]；
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
canvas.addEventListener（'mousedown'，dragStart，false）；
canvas.addEventListener（'mousemove'，drag，false）；
canvas.addEventListener（'mouseup'，dragStop，false）；
addEventListener（'dblclick'，dblclickerase）；
}
函数dblclickerase（evt）{
阻力=0；
shapes.pop（）；
shapes.pop（）；
varⅠ，j；
var highestIndex=-1；
//正确获取鼠标位置，注意调整浏览器中可能出现的大小：
var bRect=canvas.getBoundingClientRect（）；
mouseX=（evt.clientX-bRect.left）*（canvas.width/bRect.width）；
鼠标=（evt.clientY-bRect.top）*（canvas.height/bRect.height）；
//现在查找单击的形状
对于（i=0；i

正文{
}
帆布{
边框：1px纯色灰色；
}
钮扣{
字号：128%；
右边距：-12px；
位置：绝对位置；
}

---

我还没有想到用你的想法来解决这个项目，但我有一些意见可能会对你有所帮助

1：如果你想与正在放置的形状进行交互，我不建议你使用画布，这主要是因为画布是为了高效地绘制图形，所以它只保存像素信息。您也可以尝试SVG，甚至是新的HTML5特性来拖放元素（）。但是，如果您希望在画布和javascript上继续，您应该尝试使用onmousedown而不是onclick来触发拖动函数，因为这些事件的顺序是onmousedown、onmouseup，然后是onclick（）

2：可能是t

      for (var j = i + 1; j < shapes.length; ++j) {
        shapes[j - 1] = shapes[j];
      }
      shapes.pop();