Javascript Touch Events

22 Haz

Javascript kullanana uygulamaları kişisel bilgisayarların tarayıcılarında kullanırken yakalanabilen mouse olayları(events)mobil platforlarda mümkün olmamaktadır. Bunun yerinde mobil veya dokunmatik platformlarda touch(dokunma) olayları yakalanabilmektedir.

touchevents

Resim Kaynağı: http://www.girliemac.com/assets/images/articles/2013/04/touchevents.png

 

Mouse hareketlerinde olduğu gibi dokunmatik ekranlarda da javascriptin bizlere sunduğu touch down, touch move, touch end gibi olay yakalama(event handling) seçenekleri vardır.

Olay Açıklama
touchstart Kullanıcı ekrana bir veya daha fazla parmağını ekrana dokunduğunda gerçekleşir.
touchmove Kullanıcı ekranda parmağını dokunarak hareket ettirdiğinde, sürüklediğinde gerçekleşir.
touchend Kullanıcı ekrandan parmağını çektiğinde gerçekleşir.
touchcancel Ekrandaki temas noktası kesintiye uğradığında gerçekleşir.

 

touchstart

function start() {
   // Dokunulacak element referans olarak alınır.
   var touchElement = document.getElementById("touchelement");
 
   // Referans alınan elemente event handler eklenir.
   touchElement.addEventListener("touchstart", touchHandler, false);

   function touchHandler(event) 
   {
       e.preventDefault();

       console.log("I am touch start event");
  } 
} 

touchmove

function start() {
   // Dokunulacak element referans olarak alınır.
   var touchElement = document.getElementById("touchelement");
 
   // Referans alınan elemente event handler eklenir.
   touchElement.addEventListener("touchmove", touchHandler, false);

   function touchHandler(event) 
   {
       e.preventDefault();

       console.log("I am touch move event");
  } 
} 

Bu olayların hepsi bazı tarayıcıda çalışmayabilir. Ancak ilk üç olay(event) genelde tüm tarayıcılarda çalışır.

Olayları Chrome Internet tarayıcısında test etmek için F12 ile geliştirici araçlarında bulunan “Toggle Device Toolbar” seçeneği kullanılabilir. Bu seçenekte değişik mobil cihazların simülasyonu gerçekleştirilmektedir.

Adsız

Burada not olarak belirtmekte fayda var ki touchcancel olayını çalıştırmak için ekranda touchmove hareketini yaparken mouse sağ tuşuna basmanız yeterli olacaktır. Bu durumda ekranda ki temas noktası bozulmaya uğrar ve touchcancel olayı tetiklenecektir.

Bir Cevap Yazın

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

Yorum için bu kutuya doğru sayıyı girin * Time limit is exhausted. Please reload CAPTCHA.