使用Snap.svg做第二次點擊操作

我正在使用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中的第二次點擊。例如：按此按鈕一次，幻燈片導航打開。第二次點擊它，導航消失。

在此先感謝！

來源

2014-05-25 Georgi B. Nikolov

你會想要存儲點擊的狀態。

有許多不同的方式去了解這一點，但我會選擇二：

創建一個計數器變量（比如，counter）和每個click處理程序運行時間增加了。然後，每一次，以決定該怎麼做，看看數字是偶數或奇數：

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; 
    } 
});

來源

2014-05-25 15:22:21 AstroCB

好的解決方案，但已經有一種內置的方法來做到這一點，而且您不需要手動添加計數器。查看我對內置解決方案的回答。 – Joeytje50

@ Joeytje50 True;只是一種選擇。有趣的是，我不知道這種內置的方式。 – AstroCB

我也沒有，直到我去尋找一種方式[區分空格鍵/進入按下並點擊一個焦點按鈕]（http://stackoverflow.com/a/20849411/1256925），這是當我發現'事件。 detail'。我已經在大量的答案中提到了'event.detail'，因爲很多事情可以比沒有它的事情容易得多。 PS：如果你從我的回答中學到了一些東西，請注意它;） – Joeytje50

你可以通過使用event.detail屬性來做到這一點。在你的情況，這將是：

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倍快）。如果你基本上要進行切換，而不是恢復在DoubleClick的元素，你可以簡單地檢查元素比其他一個width或height風格初始width或height：

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); 
    } 
});

然後if()將返回true當width屬性等於width樣式，或width樣式爲空/未定義時。

來源

2014-05-25 15:22:39 Joeytje50

感謝您的幫助，但是當我點擊並使矩形縮小時，我必須多次按下鼠標按鈕才能使其再次工作並放大其大小。另外，在第二次點擊時，它會變大2倍，因爲它會將其與原始大小相乘 - 100 * 2 ... –

請參閱我的編輯。我已經添加了一個簡單的切換機制的代碼。我還修復了恢復的寬度和高度，以便恢復到正常狀態，而不是增加到原始尺寸的兩倍。 – Joeytje50

我認爲對此的改進不會使用detail屬性，而是屬於Snaps Element原型的data（）方法。您可以在活動中放置一面旗幟。例如。 if（this.data（'clickCounter'）== 0）{this.data（'clickCounter'，1）;} else {this.data（'clickCounter'，0）; }' –

使用Snap.svg做第二次點擊操作

回答

相關問題