JQuery ile çift tıklama eylemini nasıl yapabileceğimizi önceki yazımda paylaştım, şimdi de bir butona tek tıklanması ile çift tıklanması durumlarında farklı fonksiyonları nasıl tanımlayabileceğimizi incelleyeceğiz.
Problem: Bir butona çift tıklanması durumu aynı zamanda tek tıklanması durumunu da içerdiği için her çift tıklama, içerisindeki tek tıklama eylemini de içermiş oluyor. Sonuç olarak bir butonun hem tek, hem de çift tıklanması durumlarına birer fonksiyon tanımladığınızda çift tıklama fonksiyonu, önce tek tıklama fonksiyonunu çalıştırmış oluyor. Bunun önüne geçmek için bir timer ekleyeceğiz.
Önceki problemi JQuery ile çözmüştüm ama bu problemi JavaScript ile çözmeyi tercih ettim. Benzer bir timer mantığını JQuery ile de kurgulayabilirsiniz.
<button id="tikla">Tıkla</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const dugme = document.getElementById('tikla')
let timer
dugme.addEventListener('click', event => {
if (event.detail === 1) {
timer = setTimeout(() => {
alert("tek tıklama");
}, 200)
}
})
dugme.addEventListener('dblclick', event => {
clearTimeout(timer)
alert("çift tıklama");
})
</script>