Bildiğimiz gibi masaüstü-dizüstü bilgisayarlarda kullanılan tarayıcıların mousemove, click, down, up vs olayları vardı.
Tabletler hayatımıza girdikçe touch teknolojisi ile birlikte bu olaylar hayatımızdan çıkıyor.
Artık, touchstart, touchmove, touchend olayları ile haşır neşir olacağız. İsimlerinden de anlaşıldığı gibi ekrana parmağımız ile basmaya başlama, üzerinde gezme ve basmayı bitirme. Şimdi bu olayları html ve javascript kardeşliği ile nasıl yakalayıp kullanacağımıza bakalım.
Sayfamıza bir div ve text ekleyelim
<input type="text" id="txt">
<div style="position: absolute; width: 298px; height: 162px; z-index: 1; left: 151px; top: 14px; border-style: solid; border-color: #008000; background-color: #0099CC" id="divim">
</div>
Olayları yakalamak için divi kullanalım. Ekranda gezme olayını yakalayıp koordinatları alacağız. Bu işlemi yaparken de tarayıcımızın sağa sola kaymaması için olayları safariye göndermeyeceğiz.
_divim=document.getElementById("divim");
_divim.addEventListener("touchmove", function(evt){
evt.preventDefault();
}, false);
olayları bu şekilde yakalıyor evt.preventDefault(); komutu ile de geri sayariye gitmesini engelliyoruz.
koordinatları da şu şekilde alabiliyoruz.
function touchPozisyon(evt)
{
if (evt.touches !== undefined && evt.touches.length === 1) {
var touch = evt.touches[0];
mevcutKoordinat.x = touch.clientX;
mevcutKoordinat.y = touch.clientY;
}
return {
x: mevcutKoordinat.x,
y: mevcutKoordinat.y
};
}
Burada dikkat etmemiz gereken de evt.touches.length bu komut ile multi touch teknolojisinin nimetlerinden faydalanabiliriz. Ekranda kaç tane parmak gezdiğini öğrenebilir her birinin koordinatlarını alabiliriz. Biz şimdilik bir tanesini alıyoruz. Geri kalan ekrandaki div objemizi gezdirmek.
<script type="text/javascript">
var tiklananKoordinat = { x: 0, y: 0 };
var mevcutKoordinat = { x: 0, y: 0 };
var _top=0;
var _left=0;
function yukle()
{
_divim=document.getElementById("divim");
_divim.addEventListener("touchstart", function(evt){
evt.preventDefault();
tiklananKoordinat.x=touchPozisyon(evt).x;
tiklananKoordinat.y=touchPozisyon(evt).y;
_top=document.getElementById('divim').style.top;
_top=_top.substring(0,_top.length-2);
_left=document.getElementById('divim').style.left;
_left=_left.substring(0,_left.length-2);
document.getElementById("txt").value="başlıyor";
}, false);
_divim.addEventListener("touchmove", function(evt){
evt.preventDefault();
mevcutKoordinat.x=touchPozisyon(evt).x;
mevcutKoordinat.y=touchPozisyon(evt).y;
var farkX=tiklananKoordinat.x-mevcutKoordinat.x;
var farkY=tiklananKoordinat.y-mevcutKoordinat.y;
document.getElementById('divim').style.left=_left-farkX + "px";
document.getElementById('divim').style.top=_top-farkY + "px";
document.getElementById("txt").value=tiklananKoordinat.x;
}, false);
_divim.addEventListener("touchend", function(evt){
evt.preventDefault();
document.getElementById("txt").value="bitti";
}, false);
}
function touchPozisyon(evt)
{
if (evt.touches !== undefined && evt.touches.length === 1) {
var touch = evt.touches[0];
mevcutKoordinat.x = touch.clientX;
mevcutKoordinat.y = touch.clientY;
}
return {
x: mevcutKoordinat.x,
y: mevcutKoordinat.y
};
}
</script>
Örnek uygulamanın tamamı touch.html (2,31 kb)
Abone Ol