[JQuery] evento click che non viene attivato con l'hold

[iacoposk8]

Ciao a tutti! ho scritto questo semplice esempio per capire una cosa.
Questo script fa mostra un alert appena si clicca sul quadrato rosso.
Se però tengo premuto il tasto sinistro per qualche secondo e poi lo lascio mi fa vedere comunque l'alert.
Quindi che differenza c'è fra il click e il mouseup?
e come faccio a far apparire l'alert solo con il click e non attivarlo quando il mouse rimane premuto troppo?
grazie

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
	$(document).ready(function(){
		$("#elem").click(function(){
			alert("click");
		});
	});
</script>
<div id="elem" style="background:#f00; width:50px; height:50px;"></div>

[Walessio]

Googlando ho trovato questo:

http://www.quirksmode.org/dom/events/click.html

[iacoposk8]

quindi, se non ho capito male, quello che ho scritto dovrebbe già funzionare come voglio io..
e perchè non lo fa?

ps: ho firefox 22.0

[cavicchiandrea]

prova ad usare on

$(document).ready(function(){
		$("#elem").on('click', function(){
			alert("click");
		});
	});

[Vindav]

Quindi che differenza c'è fra il click e il mouseup?

L'evento click viene scatenato quando premi e rilasci il tasto sinistro del mouse sull'elemento interessato, mouseup quando rilasci qualunque pulsante(tasto detro, tasto centrale/rotellina).

[iacoposk8]

Originariamente inviato da cavicchiandrea
prova ad usare on

$(document).ready(function(){
		$("#elem").on('click', function(){
			alert("click");
		});
	});

mi da lo stesso risultato, a te funziona correttamente?

[iacoposk8]

ho provato anche su chrome e explorer ma non cambia... non riesco ad attivare l'evento solo con il click... ha lo stesso effetto di un mouseup

[Walessio]

Molto strano, che sia un bug di jquery?
Cmq potresti provare ad eseguire l'azione del click solo se il tempo trascorso tra l'evento mousedown e mouseup è inferiore a un certo lasso di tempo (tipo 500 msec):

var inTime = false;
$(document).ready(function(){
$("#elem").mousedown(function(){
 inTime = true;
setTimeout( function(){ inTime = false; },1*500);		
}); 	

$("#elem").mouseup(function(){
 if(inTime){
 //fai l'azione del click
 }
}); 

});

[Vindav]

Se però tengo premuto il tasto sinistro per qualche secondo e poi lo lascio mi fa vedere comunque l'alert.

Stai facendo un click, quindi è corretto che ti si presenti l'alert.

[iacoposk8]

il problema è che me lo mostra anche se lo tengo premuto tanto e poi lascio il tasto...
per ora ho usato questo soluzione sporca, però se riuscite a capire il problema è meglio ancora

speed_click.js -> plugin per jquery che accetta in entrata 2 parametri, il primo obbligatorio è la funzione che viene lanciata quando si verifica l'evento e il secondo, facoltativo, è il tempo che separa il click dall'hold del mouse che di default è 300ms

( function($) {
	$.fn.extend({ 
		speed_click: function(func, time_click) {
			var count_click=0;
			var interval_click=100;
			var var_interval;
			if(time_click==undefined)
				time_click=300;
				
			$(this).mousedown(function(){
				var_interval=setInterval(function(){
					count_click++;
				},interval_click);
			});
			
			$(this).mouseup(function(e){
				clearInterval(var_interval);
				if((count_click*interval_click)<time_click)
					func(e);

				count_click=0;
			});
		}
	}); 
}) ( jQuery );

index.html

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="speed_click.js"></script>
<script>
	$(document).ready(function(){
		$("#elem").speed_click(function(e){
			alert(e.clientX+", "+e.clientY);
		},400);
	});
</script>
<div id="elem" style="background:#f00; width:50px; height:50px;"></div>