mouse click repetition
sometimes you have buttons that increment or decrement values and beside the usual click ability you want to have a repetition feature. this means if the user clicks on the element and keeps the mouse button pushed down, the value is changed automatically in some interval, until the user releases the mouse button. fortunately beside the onclick event we have the onmousedown and onmouseup events. onmousedown is "fired" the moment that you push the mouse button down and onmouseup is "fired" the moment you release it. exactly what we need! all we need to track is, whether the button is pushed for some amount of time, then we start the repetition. here is the example code, which uses Prototype.js:
<html>
<head>
<title>mouse click repetition example</title>
<script language="JavaScript" type="text/javascript" src="prototype.js"></script>
<script language="JavaScript" type="text/javascript">
var foo = {
speed: 100, //milliseconds
hold: 700, //milliseconds
active: false,
initialize: function() {
Event.observe($('decrement'),'mousedown',function () {
foo.start_repetition(function() {
foo.decrement();
});
});
Event.observe($('decrement'),'mouseup',foo.stop_repetition);
Event.observe($('decrement'),'focus',function() { this.blur(); });
Event.observe($('increment'),'mousedown',function () {
foo.start_repetition(function() {
foo.increment();
});
});
Event.observe($('increment'),'mouseup',foo.stop_repetition);
Event.observe($('increment'),'focus',function() { this.blur(); });
},
start_repetition: function(func,start) {
func();
if(!start) foo.active = window.setTimeout("foo.start_repetition("+String(func)+",true);",foo.hold);
else if(foo.active) foo.active = window.setTimeout("foo.start_repetition("+String(func)+",true);",foo.speed);
},
stop_repetition: function() {
window.clearTimeout(foo.active);
},
decrement: function() {
$('value').value = Math.max((parseInt($('value').value)-1),0);
},
increment: function() {
$('value').value = (parseInt($('value').value)+1);
}
}
Event.observe(window, 'load', foo.initialize);
</script>
</head>
<body>
<input type="button" id="decrement" value="-" />
<input type="text" id="value" size="4" value="100" style="text-align: right;" />
<input type="button" id="increment" value="+" />
</body>
</html>