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.

Beğen  
Yazar

Makine mühendisliği mezunu bir yazılım uzmanıyım. Otomasyon ve back-end programlama üzerine çalışmaktayım. .net, MVC, ve PHP ile web, masaüstü, ve mobil uygulamalar geliştirmekteyim.

Bir Cevap Yazın

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