Question

Je voudrais une routine javascript aussi courte que possible: lorsqu'un clic de souris survient sur un bouton, il réagit d'abord comme un clic de souris, puis si l'utilisateur garde le bouton enfoncé, il réagit comme s'il le faisait continuellement, puis après un clic. tandis que maintenir le bouton enfoncé agit comme si l'utilisateur accélérait ses clics de souris ... en gros, considérez cela comme une répétition de pression de touche avec une accélération dans le temps.
c'est-à-dire que l'utilisateur maintient le bouton de la souris enfoncé (x = fonction d'appel) - x ___ x ___ x ___ x__x__x__x_x_x_x_xxxxxxx

Était-ce utile?

La solution

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 */

Autres conseils

Lorsque vous appuyez sur le bouton, appelez window.setTimeout avec l'heure souhaitée et la fonction x , puis réglez à nouveau le chronomètre à la fin de x mais cette fois avec un intervalle plus petit.

Supprimez le délai en utilisant window.clearTimeout lors du relâchement du bouton de la souris.

Il suffit de mettre le toggleOn ci-dessous dans le OnMouseDown et le toggleOff dans le OnMouseUp du bouton.

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{

}

quelque chose comme le code psuedo ci-dessous pourrait fonctionner ..

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;" />

Je viens de publier un plugin jQuery, vérifiez cette la démo sur ce repo .

$('button').clickAndHold(function (e, n) {
    console.log("Call me baby ", n);
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top