Question

Hola, quiero que al presionar un botón se inicie una función y cuando se deje presionado se inice una función distinta. Lo he intentado con onclick y onmousedown pero si lo presiono se inician ambas funciones al mismo tiempo y si lo dejo presionado se inicia onmousedown y cuando suelto la función de onclick. Gracias!

Answer 1

Mantener presionado a veces recibe el nombre de longclick, y es mas común en devices móviles.

De por si no hay un evento nativo web para esto por tanto debes arreglártela con lo siguiente:

​var mibtn= document.getElementById('miBoton');
var timer = null;

​mibtn.onmousedown = function(){
  timer = setTimeout( doStuff, 2000 );
};

mibtn.onmouseup = function(){
  clearTimeout( timer );
};

function doStuff() {
  alert('Esto se muestra al mantener presionado el boton por 2 segundos.')
}

Answer 2

Lo haria asi:

var myBtn= document.getElementById('miBoton');       
var timer, timePressed = 0;

myBtn.addEventListener('touchstart', function(e){
        timePressed = 0;
        timer = setInterval(function(){
            //aqui tienes el control de cuanto tiempo el boton esta presionado
            timePressed += 100;
            if (timePressed > 500){
               alert('Largo click!');
               clearInterval(timer);
            }
        }, 100);
    });

    myBtn.addEventListener('touchend', function(e){
        clearInterval(timer);
    });

myBtn.addEventListener('click', function(e){
        alert('Corto click!');
    });