Javascript 使用Snap.svg在第二次单击时执行某些操作

我正在使用Snap.svg为单击动画编写基本代码。看起来是这样的：

var s = Snap(500, 500);

var circle = s.rect(100,100,100,100);

circle.click(function(){
  var width = circle.attr('width');
  var height = circle.attr('height');

  circle.animate({
    width: width/2,
    height :height/2
  }, 2000);


});

我在容器的左上角制作了一个矩形，并在单击时设置其宽度的动画。然而，我想在第二次点击时做一些不同的事情，例如将其返回到原始状态

我也很高兴了解如何处理Javascript中的第二次点击。 例如：按下此按钮一次，幻灯片导航将打开。第二次轻按该按钮，将显示导航图标

---

提前谢谢

您希望存储单击的状态

有很多不同的方法，但我会选择两种：

创建一个计数器变量（例如，

计数器

），并在每次

单击处理程序时递增它。然后，每次决定做什么时，看看数字是偶数还是奇数：

var counter = 0;
circle.click(function(){
  if(counter % 2 == 0){
    //action1
  }else{
    //action2
  }
  counter++;
});

或者，您可以使用每次更改的布尔值来跟踪要执行的操作

var flag = true;
circle.click(function(){
  if(flag){
    //action1
    flag = false;
  }else{
    //action2
    flag = true;
  }
});

您可以通过使用属性来实现这一点。在您的情况下，这将是：

circle.click(function(e) {
  var width = circle.attr('width');
  var height = circle.attr('height');
  if (e.detail == 1) {
    circle.animate({
      width: width/2,
      height :height/2
    }, 2000);
  } else if (e.detail == 2) {
    circle.animate({ //example
      width:width,
      height:height
    }, 2000);
  }
});

在那里，当用户执行双击时，将播放要更改回原始大小的动画（如此快2倍）。如果您基本上希望切换元素，而不是双击将其还原，则只需检查元素是否具有除初始
宽度
或
高度
样式以外的
宽度
或
高度
样式：

circle.click(function(e) {
  var width = circle.attr('width');
  var height = circle.attr('height');
  if (parseInt(this.style.width) == parseInt(width) || !this.style.width) {
    circle.animate({
      width: width/2,
      height :height/2
    }, 2000);
  } else {
    circle.animate({ //example
      width:width,
      height:height
    }, 2000);
  }
});

当
width
属性等于
width
样式时，或者当
width
样式为空/未定义时，
if（）
将返回true。
很好的解决方案，但已经有一种内置的方法可以执行此操作，并且不需要手动添加计数器。有关内置解决方案，请参见我的答案。@joetje50 True；只是另一种选择。不过，有趣的是：我不知道内置的方法。我也不知道，直到我找到了一种方法，找到了
event.detail
。我已经在一大堆答案中提到了
event.detail
，因为有很多事情可以做得比没有它容易得多。附言：如果你从我的回答中学到了什么，请投赞成票；）@这很有用。（另外，我还以为我已经投了更高的票；另一个问题的通知转移了我的注意力）嘿，伙计，谢谢你的帮助，它成功了！但是，我在if和elseif语句中添加了counter++和counter。哪一个更好>谢谢你的帮助，但是当我点击并缩小矩形时，我必须多次按下鼠标按钮才能再次工作并放大它的大小。另外，在第二次点击时，它会变大2倍，因为它会将其与原始大小相乘-100*2…请查看我的编辑。我添加了一个简单切换机制的代码。我还修复了恢复宽度和高度，使其恢复正常，而不是增长到原始大小的两倍。我认为对此的改进不是使用detail属性，而是使用属于Snaps元素原型的data（）方法。您可以在事件中放置一个标志。例如，
if（this.data（'clickCounter'）==0）{this.data（'clickCounter'，1）；}else{this.data（'clickCounter'，0）；}