Jquery ile Tek-Çift Tıklama Kontrolü

Jquery’nin .on özelliği ile tek ve çift tıklamaya ayrı ayrı olay atayabiliyoruz. Fakat bir elemente hem tek hem çift tıklama olayı atamak isterseniz onclick olayı ondbclick olayının çalışmasını engelliyor. Bu durumu düzeltmek için basit bir timer kullanabilirsiniz. 

var DELAY = 400, clicks = 0, timer = null;
$(function(){
    $(".listItem").on("click", function(e){
        clicks++;  //count clicks
		var thiselement = $(this);
        if(clicks === 1) {
            timer = setTimeout(function() {
                singleClickAction(thiselement);
                clicks = 0;
            }, DELAY);
        } else {
            clearTimeout(timer);
             doubleClickAction(thiselement);
            clicks = 0;
        }

    })
    .on("dblclick", function(e){
        e.preventDefault();
    });
});

function singleClickAction(element) {
	alert("Tek Tıklama" + element.Val());

}
function doubleClickAction(element) {
	alert("Çift Tıklama" + element.Val());
}

Kodlar aslında oldukça açık. .listItem elementine tek tıklama yapıldığında belirtilen delay süresince ikinci tıklama gelip gelmemesi bekleniyor. Eğer gelirse çift tıklama gelmezse tek tıklama olarak kabul edilip gerekli fonksiyonları çağırıyor. .listItem değerini istediğiniz elemente göre değiştirmeyi unutmayın. Ayrıca delay sayısını düşürerek çift tıklama hızını ayarlayabilirsiniz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir