别担心，这个问题其实是事件冒泡导致的，我来帮你拆解并修复它：

问题原因 #

你给SVG画布绑定了click事件用来创建圆形，同时又给每个新生成的圆形绑定了click事件用来删除它。但当你点击圆形时，事件会从圆形（子元素）向上冒泡到SVG画布（父元素）——也就是说，圆形的remove()刚执行完，画布的handleClick事件立刻又触发了，在同一位置创建了一个新圆形，看起来就像旧圆形“移动”了（其实是旧的被删除，新的瞬间生成）。

修复方案 #

在圆形的click事件处理函数中，阻止事件冒泡到父元素即可。我们可以用event.stopPropagation()方法来实现：

修正后的完整代码 #

(function() { 
  var s = Snap("#svg"); 
  s.rect(10, 10, 400, 400); 
  s.click(handleClick); 

  function handleClick(event) { 
    var e = event.target; 
    var dim = e.getBoundingClientRect(); 
    var x = event.clientX - dim.left; 
    var y = event.clientY - dim.top; 
    var c = this.circle(x, y, 10); 
    c.attr({ fill: '#FFF' }) 
    c.click(function(event) { 
      console.log('click circle'); 
      event.stopPropagation(); // 阻止事件冒泡到SVG画布
      this.remove(); 
    }); 
  } 
})();

额外说明 #

• event.stopPropagation()会终止事件向上传递到父元素，这样点击圆形时，只会执行删除逻辑，不会触发画布的创建逻辑。
• 如果后续遇到需要阻止浏览器默认点击行为的场景，可以再加一句event.preventDefault()，不过这个场景下只需要阻止冒泡就足够解决问题了。

内容的提问来源于stack exchange，提问作者Moussa