Identificarea clickurilor cu jQuery


În proiectele Dvs web s-ar putea să vă întâlniţi cu situaţii în care doriţi să „prindeţi” click-ul mouse-ului, fie el click stânga, mijloc sau dreapta. Desigur, jQuery oferă instrumentele necesare şi vom încerca să vedem mai jos cum putem face şi ceea ce jQuery nu oferă nativ. Dacă vrem click normal pe un element (link, div, imagine…) atunci desigur putem folosim $(„#element”).click(), dar ca să trecem toate cele trei scenarii în revistă ne vom folosi de mousedown.

imagine

Astfel, următorul cod ne permite să aflăm ce fel de click am dat. Simplu… normal că este simplu.

$(document).mousedown(function(e) {
    if(e.which == 1) $("#foo").html("Click stânga!");
    if(e.which == 2) $("#foo").html("Click mijloc!");
    if(e.which == 3) $("#foo").html("Click dreapta!");
});

Dacă dorim să prindem un dublu click, din nou jQuery are nativ ceva: dblclick().

$(document).dblclick(function(e) {
    $("#foo").html("Click stânga dublu!");
});

Dar dacă dorim să prindem un dublu click cu butonul din dreapta? Undeva am găsit soluţia de mai jos, dar nu mai reţin de unde. Cert e că dacă în loc de clickuri==2 punem clickuri==3 atunci vom putea detecta un triplu click dreapta! Dacă lăsăm linia cu return false; atunci nu vom mai avea meniul contextual. De reţinut când vrem într-o webaplicaţie să scăpăm de meniul contextual (nu că ar fi singura soluţie).

var clickuri=0;
$(document).bind({
    contextmenu: function(){
        clickuri++;
        if (clickuri==1){
            setTimeout(function(){
                if(clickuri==2){
                    $("#foo").html("Click dreapta dublu!")
                }
                clickuri=0;
            },500);
        }
        return false;
    }
});

Sper să vă fie de folos. Dacă vreţi să vedeţi acest text în acţiune, am făcut o mică pagină aici.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *