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.
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.
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.
