Gedrückter Button

[Kinger]

Hallo,

ich möchte die Zeit messen in der ein Button gedrückt wird. Dazu habe ich folgenden Code geschrieben:

<div id="timer">00 : 00 : 00 : 00</div> 
<button id="button" name="button" type="button" value="Start">Start</button>

[HIGHLIGHT=javascript]
$(document).ready(function(){
var mousedownTimeout;
var startTime = 0;

$('#button').bind('mousedown', function(){
startTime = new Date().getTime();
mousedownTimeout = window.setInterval(function() {
$('#timer').text(convertMilliseconds(new Date().getTime() - startTime));
}, 1);
});

$('#button').bind('mouseup', function(){
window.clearInterval(mousedownTimeout);
$('#timer').text(convertMilliseconds(new Date().getTime() - startTime));
});

function convertMilliseconds(milliseconds) {
var times = new Array();
times['seconds'] = Math.floor(milliseconds / 1000);
times['minutes'] = Math.floor(times['seconds'] / 60);
times['seconds'] = times['seconds'] % 60;
times['hours'] = Math.floor(times['minutes'] / 60);
times['minutes'] = times['minutes'] % 60;
times['days'] = Math.floor(times['hours'] / 24);
times['hours'] = times['hours'] % 24;

for (var time in times) {
times[time] = times[time].toString();
while (times[time].length < 2) times[time] = "0" + times[time];
}

return times['days'] + " : " + times['hours'] + " : " + times['minutes'] + " : " + times['seconds'];
};
});
[/HIGHLIGHT]

Das tut auch erstmal das was es soll. Leider ist es so, dass wenn ich folgende Aktionen ausführe...

1. Button klicken (geklickt halten)
2. Maus vom Button wegbewegen
3. Maus loslassen (nicht mehr klicken)

... der Timer weiterzählt.

Gibt es eine Möglichkeit den Timer nur laufen zu lassen wenn der Mauszeiger auch wirklich über dem Button ist und geklickt wird?

Gruß Kinger

[Falk Prüfer]

Hallo,

...Gibt es eine Möglichkeit den Timer nur laufen zu lassen wenn der Mauszeiger auch wirklich über dem Button ist und geklickt wird?

Binde zusätzlich deine "Stopfunktion" - analog zu 'mouseup' - an das Event 'mouseout'.

Gruß Falk

[Kinger]

Super Tipp! So geht es.

So sieht der Code nun aus:
[HIGHLIGHT=javascript]
$(document).ready(function(){
var mousedownTimeout;
var startTime = 0;

$('#button').bind('mousedown', function(){
timerStart();
});

$('#button').bind('mouseup', function(){
timerStop();
});

$('#button').bind('mouseout', function(){
timerStop();
});

function timerStart() {
startTime = new Date().getTime();
mousedownTimeout = window.setInterval(function() {
$('#timer').text(convertMilliseconds(new Date().getTime() - startTime));
}, 1);
}

function timerStop() {
window.clearInterval(mousedownTimeout);
$('#timer').text(convertMilliseconds(new Date().getTime() - startTime));
}

function convertMilliseconds(milliseconds) {
var times = new Array();
times['seconds'] = Math.floor(milliseconds / 1000);
times['minutes'] = Math.floor(times['seconds'] / 60);
times['seconds'] = times['seconds'] % 60;
times['hours'] = Math.floor(times['minutes'] / 60);
times['minutes'] = times['minutes'] % 60;
times['days'] = Math.floor(times['hours'] / 24);
times['hours'] = times['hours'] % 24;

for (var time in times) {
times[time] = times[time].toString();
while (times[time].length < 2) times[time] = "0" + times[time];
}

return times['days'] + " : " + times['hours'] + " : " + times['minutes'] + " : " + times['seconds'];
};
});
[/HIGHLIGHT]
Danke!

[Kinger]

Noch eine kurze Anmerkung:

Folgender Code sollte noch aus der Stop-Funktionion entfernt werden, da sonst immer wenn man über den Button mit der Maus fährt der Timer aktualisiert wird.
[HIGHLIGHT=javascript]
$('#timer').text(convertMilliseconds(new Date().getTime() - startTime));
[/HIGHLIGHT]

Gruß