Detectar mouse despues de 2 segundos de apretado el clic izq

[MauricioCr]

Hola a todos.

Como detectar el mouse despues de 2 segundos de apretado el clic izq y ejecutar una funcion de JS.

Gracias!!!

[jeybi]

Código javascript:

function wait(tiempo,funcion){
    setTimeout(funcion,tiempo*1000);
}
 
function funcionX(){ 
    alert('oK');    
}
 

Ejemplo de uso:

Código HTML:

<input type="button" onclick="wait(2,funcionX)" value="Clickeame"  /> 

Descripcion:wait recibe 2 parametros, tiempo y funcion. Tiempo define el tiempo en segundos, ejemplo: 1, 2, 10, etc. Funcion define la funcion que se desea ejecutar despues de X Tiempo, puedes ser cualquier funcion definida.

Puedes hacerlo solo con setTimeOut, pero queda mas limpio si usas esta pequeña funcion.

[MauricioCr]

Gracias Jeybi por su codigo.

El problema es que no es al dar clic que llame la funcion, sino mas bien despues de haber presionado el clic durante 2 s

[jeybi]

Ok, pues pudiste especificarlo :):

Puedes usar esta funcion con window.onload o asignando los eventos directamente en el elemento que quieres que se comporte como dices:

Código javascript:

window.onload = function(){
    document.getElementById('mantener').onmousedown = esperar;
    document.getElementById('mantener').onmouseup = cancelar;
}
 
function esperar() {
    esperar.tiempo = setTimeout(tuFuncion, 2000);
}
 
function cancelar() {
    clearTimeout(esperar.tiempo);
}
 
function tuFuncion(){
    alert('Lo lograste!');
    
}
 

Ejemplo:

Código HTML:

<div id="mantener" style="width:400px; height:400px; border:1px solid red;"> Esto es un div cualquiera, al mantener el mouse por 2 segundos presionado saldra un mensaje </div> 

[MauricioCr]

jeybi, un millon de gracias.

Que hariamos sin personas como ud que estan anuentes a ayudar. ;)

Gracias

[MauricioCr]

Ahora me topo con un problema que llevo tratando de solucionarlo pero no puedo.

Me da este error:

Código:

Error: useless setTimeout call (missing quotes around argument?)
Archivo de origen: file:///C:/Documents%20and%20Settings/Administrador/Escritorio/index.htm
Línea: 12

Y al soltar el clic cambia el valor del input

Código javascript:

function editar(id){
    document.getElementById(id).onmousedown = esperar('i'+id);
    document.getElementById(id).onmouseup = cancelar;
}
function esperar(id) {
    esperar.tiempo = setTimeout(tuFuncion(id), 2000);
}
 
function cancelar() {
    clearTimeout(esperar.tiempo);
}
 
function tuFuncion(id){
    document.getElementById(id).value = "Otro valor";
}
 

Código HTML:

<div id="1" style="width:400px; height:60px; border:1px solid red;" onclick="editar('1')"> Esto es un div cualquiera, al mantener el mouse por 2 segundos presionado saldra un mensaje </div>
<input id="i1" type="text" size="20" value="aaaaa"> 

Muchas gracias si me dice que error estoy cometiendo.

[jeybi]

Ok, lo que pasa es:

1.al acer clik llamas a editar(1)

2.la funcion editar intenta asignar funciones a los eventos onmousedown y onmouseup, cosa que no puede porque cuando es llamada, el click ya se termino

3.al dar click en el div, intentas llamar a: setTimeout(tuFuncion(id), 2000), cosa que no resulta porque para pasar parametros tienes enviarl el primer argumento como una string

4.el codigo falla por que settimeout no reconoce tuFuncion(id), cuando deberia ser 'tuFuncion("'+id+'")' por ejemplo.

Aqui tienes este trozo de codigo, estudialo y dime si te va:

Código javascript:

//Esta funcion recibe 2 argumentos, evento que es el evento por el cual fue llamada (onmouseup, onmousedown) e id, que es la id que le pasas 
function esperar(evento, id){
    evento = window.event || evento; //Compatibilidad con IE para reconocer el evento
        
    if(evento.type == 'mousedown'){   //Si el evento es onmousedown entonces...
        var funcion = 'editar("i'+id+'")';     //Creamos un string con la funcion editar mas el parametro id
        esperar.tiempo = setTimeout(funcion, 2000);   //Llamamos a settimeout de la manera correcta
    }    
    else if(evento.type == 'mouseup'){   //Si el usuario suelta el click antes de tiempo...
        clearTimeout(esperar.tiempo);   //Cancelamos la llamada a a editar
    }
            
}
 
//Justo como la tenias
function editar(id){
    document.getElementById(id).value = "Ready!";  
}
 

El HTML:

Código HTML:

<div id="1" style="width:400px; height:60px; border:1px solid red;" onmouseup="esperar(event, 1)" onmousedown="esperar(event, 1)"> Esto es un div cualquiera, al mantener el mouse por 2 segundos presionado saldra un mensaje </div>