重複按鈕 - 如果你保持它壓低，它會持續發射一個函數

Question

我不知道該怎麼稱呼它，我所能想到的只是一個Repeater按鈕。

我想按下一個按鈕，它立即觸發一個函數，例如MyZoom（InOrOut）。

但是，如果我按住鼠標按鈕，它會繼續每隔十分之一秒發射一次MyZoom（InOrOut），直到我鬆開鼠標按鈕。你可以從函數名稱中猜出，我會有2個按鈕，一個放大和一個縮小。他們會打電話給MyZoom（-1）使它變小，MyZoom（1）使它變大。

<button onclick="MyZoom(-1);">Zoom Out</button> 
<button onclick="MyZoom(1);">Zoom In</button> 

我該如何改變它以包括重複效果？

Answer 1

使用onmousedown和onmouseup事件。

在onmousedown開始一個時間間隔並停止在onmouseup。

下面是使用jQuery的一個小例子：

HTML：

<button class="zoomButton" data-zoom="out">Zoom Out</button> 
<button class="zoomButton" data-zoom="in">Zoom In</button> 

的JavaScript：

var zoomIntervals = {}; 
$('.zoomButton').on('mousedown', function() { 
    var mode = $(this).data('zoom'); 
    zoomIntervals[mode] = setInterval(function() { 
     // here you perform your action. 
     // check if mode == 'in' or mode == 'out' to determine if 
     // the user is zooming in or out 
    }, 100); 
}).on('mouseup', function() { 
    var mode = $(this).data('zoom'); 
    clearInterval(zoomIntervals[mode]); 
    del zoomIntervals[mode]; 
}); 

如果不（要）使用jQuery，使用addEventListener()註冊事件並直接訪問數據屬性（與舊版瀏覽器不兼容）或使用例如ID屬性來標識按鈕。

Answer 2

我會爲此使用jQuery。有一個事件叫做mousedown，另一個事件叫mouseup，這會幫助你做到這一點。基本上，mousedown事件啓動一個定時器（重複它），當mouseup事件被觸發時它會被停止。

你可能有這樣的事情：

$('#myzoominbutton').mousedown(function() { 
    alert('zooming is cool'); 
});