[SOLUCIONADO] Controlar doble cliks sobre elemento html

[jmsalinas88]

Hola como estan?, a ver si me pueden dar una mano con esto que lo vengo viendo hace tiempo y soy bastante novato en JS.

El siguiente html que expongo es a modo de ejemplo, porque el html que tengo está generado con un servlet de Java y no está para nada prolijo, entonces,

Tengo el siguiente form:

<form method="POST" action="">
<input type="button" value="Enviar" onclick="miFunc('999999')" id="elemento"> </input>
</form>

Quiero controlar dobleclicks sobre el elemento que hace la llamada a 'miFunc(param)' porque dentro de esa función hace una petición a un servlet que devuelve un archivo PDF y, cuando hace varias llamadas simultaneas, obtengo un excepción del lado del servidor.

Pensé en las siguientes implementaciones:

function remueveOnclick(e){

var mjs = $(e).attr('onclick');
$(e).removeAttr("onclick");
setTimeout( function(){ addOnclick(e,mjs) } , 2000);
}

function addOnclick(e, manejs){
$(e).attr('onclick', manejs);
}

Pero estas no me funcionan con IE, todo ok con Chrome y Firefox, pero con IE no me vuelve a setear el attr: $(e).attr('onclick', manejs);

Entonces pensé en esta otra:

$("#elemento").unbind("click");
$("#elemento").removeAttr("onclick");

setTimeout(function(){ $("#trPasaje").bind("click", miFunc ) }, 2000);

Esto tampoco me funciona, porque pierdo el valor del parametro (param) que le paso a 'miFunc'

Entonces pensé en hacerlo de esta manera:

$("#elemento").unbind("click");
$("#elemento").removeAttr("onclick");

setTimeout(function(){ $("#trPasaje").bind("click", miFunc(param) ) }, 2000);

Pero tampoco me funciona, porque entro en un loop.

El problema no lo termino de resolver porque la primera implementación que pensé no me funciona con IE, estas son las maneras menos rebuscadas que me vinieron a la cabeza, después estuve pensando e implementando otras pero eran muy tediosas y mucho trabajo por una cosa que no lo vale (lo que me dijo mi compañero de trabajo).

Espero que me puedan dar una mano para controlar los dobleclicks en Jquery y evitar las llamadas inecesarias al servlet, desde ya mil gracias!.

[andresgarciadev]

simplemente crea una variable con un valor especifico como True, al empezar la funcion "miFunc" valida si es igual a true, si es asi continue y asignale false
una vez terminada toda la funcion recien vuelve a poner la variable como True y listo e.e

[jmsalinas88]

andresgarciadev,

Muchas gracias por tomarte el tiempo y responder!, el problema es que, luego de remover el evento onclick: miFunc('999999') debo asignarlo nuevamente al onclick del elemento tal cual, con el valor que le paso a miFunc, en este caso: 999999

La forma de asignar diámicamente la función al elemento es de esta manera:

setTimeout(function(){ $("#trPasaje").bind("click", miFunc) }, 2000);

Sin pasarle parametros a miFunc, así lo toma, pero necesito el valor del parametro con el cual fue llamada: 999999

Si lo hago de esta forma:

setTimeout(function(){ $("#trPasaje").bind("click", miFunc(param) ) }, 2000);

En lugar de volver a asignarle al onclick de #trPasaje, lo que hace es ejecutar la función y entro en un loop.

[jmsalinas88]

Encontré la manera de hacerlo, dejo las funciones que creé, capaz sirve a otros, no las he probado para IE:

//Testeada: Funciona en Firefox, Chrome
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

setTimeout( function(){ $("#elemento").attr("onclick", "miFunc('"+param+"')"); } , 5000);

}*/

//Testeada: Funciona en Firefox, Chrome
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

setTimeout( function(){ document.getElementById("elemento").setAttribute(" onclick", "miFunc('"+param+"')"); } , 5000);

}*/


//Testeada: Funciona en Firefox, Chrome
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

var e = document.getElementById("elemento");

setTimeout( function(){ e.onclick = new Function( "miFunc('"+param+"')" ); } , 5000);

}*/


//Testeada: Funciona en Firefox, Chrome
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

var e = document.getElementById("elemento");

setTimeout( function(){ e.onclick = function(){ miFunc(param); }; } , 5000);

}*/

//Testeada: Funciona en Firefox, Chrome
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

var e = document.getElementById("elemento");

setTimeout( function(){ e.onclick = (function(){ return miFunc(param) }) } , 5000);

}*/

//Testeada: Funciona en Firefox, Chrome, esta version supuestamente funciona con IE
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

var e = document.getElementById("elemento");

setTimeout( function(){ e["onclick"] = new Function( "miFunc('"+param+"')" ); } , 5000);

}*/


//Testada: Funciona en Firefox, Chrome, y supuestamente funciona con todos, (ver IE)
/*function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

setTimeout( function(){ document.getElementById("elemento").onclick = function() { miFunc(param); } } , 5000);

}*/

[jmsalinas88]

Y aca paso el resultado final:

HTML:

<input type=button value="Boton" id="elemento" onclick="miFunc('123')">

Js: Ambas versiones funcionan con Firefox, Chrome, IE8

function agregarOnclick(obj, funcName, param){

setTimeout( function(){ obj.onclick = new Function( ""+funcName+"('"+param+"')" ); } , 2000);


}

function agregarOnclick(obj, funcName, param){

setTimeout( function(){ obj["onclick"] = new Function( ""+funcName+"('"+param+"')" ); } , 2000);


}

function miFunc(param){

alert('Entro a mi funcion, valor param: '+param);

$("#elemento").removeAttr("onclick");

alert('Miro DOM');

agregarOnclick( document.getElementById("elemento") , "miFunc", param);

}

Espero que les sirva!, abrazo!.

[Alexis88]

El problema de los clics lo puedes controlar con el método one de jQuery, el cual ejecuta una y sólo una vez un evento.

DEMO

Sería mejor si los eventos los asignaras en el código JS y no como atributos de los elementos del documento, esa forma de trabajar está desaconsejada por la W3C a partir de la implementación de HTML5.

Saludos

[jmsalinas88]

Hola Alexis88,

Muchas gracias por tu respuesta y por la DEMO, para este caso no lo quiero ejecutar una sola vez, sino que este disponible todo el tiempo, para poder solicitar la impresión de PDFs las veces que el usuario quiera.

No se casi nada de JS ni Jquery, pero parece que el 'one' para este caso no me sirve. Aparte, la función que se ejecuta en el onclik ya tiene un parametro, que seria el id del archivo. Todo eso es generado por el servlet.

Si hay una manera de volver a asignar al elemento html mi función y el id del archivo que le paso como parametro, sería genial!. Por lo pronto ésa fué la solución que encontré.

Gracias!.

Saludos,