Veiem el codi necessari per poder detectar el doble click amb el ratolí amb la llibreria jQuery de JavaScript.
Posem el cas que voleu detectar quan l’usuari fa doble click sobre un botó. Com ho podríem detectar amb jQuery per poder fer que llavors s’executi una sentència concreta? Donem resposta en forma de codi:
Codi HTML
La primera cosa que farem és crear el botó en qüestió que tindrà una ID específica:
<input type="button" value="Double Click" id="btn_doubleclick" />
<div id="console"></div>Si reviseu el codi, veureu que és un botó amb ID btn_doubleclick. A part, he creat un bloc DIV on aniré escrivint cada vegada que es faci doble click sobre el botó.
Detectar doble click al botó
Doncs deixem aquí el codi que capturarà l’event del doble click sobre el botó que hem creat:
var clicks = 0;
$('#btn_doubleclick').dblclick(function(e){
e.preventDefault();
$('#console').html("Hi "+ clicks);
clicks++;
});Si mireu, captura l’event dblclik(), i dintre escrivim al bloc de consola un text que va sumant les vegades que fem doble click dintres.
Detectar doble click a tota la web
Ara ja sabem capturar el doble click sobre el botó. Veiem com ho podem fer el capturar el doble click a qualsevol part de la pàgina. Hi ha només un petit canvi:
var clicks = 0;
$('*').dblclick(function(e){
e.preventDefault();
$('#console').html("Hi "+ clicks);
clicks++;
});El veieu? Si, cridem a $(‘*’) i no a $(‘#btn_doubleclick’). D’aquesta manera, jQuery interpreta que ha de capturar a qualsevol element de la pàgina.
Codi en acció
I ara toca veure el codi en acció. Aquí ho teniu:
See the Pen jQuery Detect Double Click by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.
Amb aquests exemples, ja no teniu excusa per poder capturar i detectar el doble click amb jQuery, sigui a un botó o a tota la web. Esperem que us sigui d’utilitat.
Més informació