5.00 / 1 oy

JavaScript'te tek tıklama ile çift tıklama için farklı eylemler tanımlamak

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>

 

RainingCodes

28.02.2020 19:52

Bu soruya sadece kayıtlı kullanıcılar yanıt yazabilirler. Yanıt yazmak için lütfen giriş yapınız.

Reitix
JavaScript'te tek tıklama ile çift tıklama için farklı eylemler tanımlamak

İnternet sitemizdeki deneyiminizi iyileştirmek için çerezler kullanıyoruz. Bu siteye giriş yaparak çerez kullanımını kabul etmiş sayılıyorsunuz. Daha fazla bilgi.