Q1186 How can I start a loop when the mouse button is pressed and exit that loop when the mouse button is released?

You are here: irt.org | FAQ | JavaScript | Pointer | Q1186 [ previous next ]

By utilising the event handlers: onMousedown() and onMouseup()

Although you'll not be able to use a loop, as the loop needs to know hen it has to end. Whilst looping nothing can interupt the loop to stop it. the only way to 'loop' is to use a timer to effectively invoke the code you want performed again and again, until the mouse is released:

I was unable to get this to work on Netscape Navigator 4.5 on Linux using a form button, but using an image link worked successfully:

<html>

<head>
<script language="JavaScript"><!--
var timerID = null;

var i;

function initialiseTimer() {
    // place initial code after this line
    document.myForm.myText.value = '';
    i = 0;
    // and before this line
    timerID = window.setTimeout('mainTimer()',10);
}

function mainTimer() {
    // place your main code after this line
    i++;
    document.myForm.myText.value = i;
    // and before this line
    timerID = window.setTimeout('mainTimer()',10);
}

function terminateTimer() {
    // place temination code after this line
    document.myForm.myText.value = 'BANG!';
    // and before this line
    window.clearTimeout(timerID);
}
//--></script>
</head>

<body>

<form name="myForm">
<input type="text" name="myText">
<br>
<input type="button" value="Light the touch paper" onMouseDown="initialiseTimer()" onMouseUp="terminateTimer()">
<br>
<a href="#"  onMouseDown="initialiseTimer()" onMouseUp="terminateTimer()"><img src="image.gif" width="100" height="30" border="0"></a>
</form>

</body>
</html>