Precisa de ter o javascript de código para o botão, pressione e segure
-
09-06-2019 - |
Pergunta
Eu gostaria de um curto período de menor possível javascript rotina que, quando um mousedown ocorre em um botão, ele responde primeiro apenas como um clique do mouse e, em seguida, se o usuário mantém o botão pressionado, ele responde como se o usuário estivesse continuamente enviando cliques e depois de um tempo, com o botão pressionado age como se o usuário estivesse acelerando seus cliques...basicamente, pense nisso como um keypress repita com a aceleração no tempo.
i.e.usuário mantém pressionado o botão do mouse (x=função de chamada) - x___x___x___x__x__x_x_x_x_xxxxxxx
Solução
function holdit(btn, action, start, speedup) {
var t;
var repeat = function () {
action();
t = setTimeout(repeat, start);
start = start / speedup;
}
btn.mousedown = function() {
repeat();
}
btn.mouseup = function () {
clearTimeout(t);
}
};
/* to use */
holdit(btn, function () { }, 1000, 2); /* x..1000ms..x..500ms..x..250ms..x */
Outras dicas
Quando o botão é premido, ligue para window.setTimeout
com o tempo previsto e a função x
, e definir o temporizador novamente no final do x
mas desta vez, com um intervalo menor.
Claro que o tempo limite de utilização window.clearTimeout
assim que soltar o botão do mouse.
Basta colocar o abaixo toggleOn no OnMouseDown e toggleOff no OnMouseUp do botão.
var tid = 0;
var speed = 100;
function toggleOn(){
if(tid==0){
tid=setInterval('ThingToDo()',speed);
}
}
function toggleOff(){
if(tid!=0){
clearInterval(tid);
tid=0;
}
}
function ThingToDo{
}
algo como o psuedo código abaixo podem funcionar..
var isClicked = false;
var clickCounter = 100;
function fnTrackClick(){
if(isClicked){
clickCounter--;
setTimeout(clickCounter * 100, fnTrackClick);
}
}
<input type="button" value="blah" onmousedown="isClicked=true;" onmouseover="fnTrackClick();" onmouseup="isClicked = false;" />
Eu acabei de lançar um plugin para jQuery, confira essa demonstração neste repo.
$('button').clickAndHold(function (e, n) {
console.log("Call me baby ", n);
});