如何在单击时删除 snap.svg 元素答案

【问题标题】：How to delete snap.svg element on click如何在单击时删除 snap.svg 元素
【发布时间】：2018-06-24 05:03:11
【问题描述】：

点击后如何删除svg？我正在使用库snapsvg。我有plunkered 我的问题。

用例如下：当用户点击svg时，我在用户点击的位置创建了一个圈子，如果用户点击了一个已经创建好的圈子，我想删除这个圈子。我有一个奇怪的行为，因为圆圈被移动但没有被删除。

(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() {
      console.log('click circle');
      this.remove();
    });
  }

})();

【问题讨论】：

@mplungjan：我不确定你的回答如何解决我的问题......我没有使用 D3 js。您能否提供一些代码来帮助解决我的问题而不是链接？

标签： javascript svg snap.svg

【解决方案1】：

我设法找到了解决方案，该元素没有移动，实际上它已被删除但创建了另一个。为了解决我的问题，我刚刚在 c.click 函数中添加了event.stopPropagation();：

c.click(function(event) {
  console.log('click circle');
  this.remove();
  event.stopPropagation();
});

【讨论】：