2012-04-21 10 views
0

何を呼び出すべきかわからない、リピータボタンだと思う。リピートボタン - 押し続けるとファンクションが機能し続ける

私はボタンを押したまま、すぐに機能を一度起動します。例えばMyZoom(InOrOut)です。

マウスボタンを押したままにすると、マウスボタンを離すまで、MyZoom(InOrOut)が10分の1秒ごとに点滅し続けます。

おそらく関数名から推測できるように、2つのボタン、ズームイン、ズームアウトがあります。 MyZoom(-1)を呼び出すと小さくなり、MyZoom(1)を呼び出すと大きくなります。

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

繰り返し効果をどのように変更することができますか?

答えて

2

onmousedownonmouseupイベントを使用してください。

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プロパティ

+0

感謝を。 – Rewind

1

私はこれにjQueryを使用します。 mousedownと呼ばれるイベントと、それを行うのに役立つmouseupという別のイベントがあります。基本的にmousedownイベントは、mouseupイベントが発生したときに停止するタイマー(繰り返し)を開始します。

あなたはこのようなものかもしれない:答えのための

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

ありがとうございました。 – Rewind

関連する問題