İmlecin tarayıcı penceresindeki hareketine yanıt olarak bazı eylemleri programlamak için bazen koordinatlarını belirlemek gerekir. Bu, tarayıcıda meydana gelen olayları izleme yeteneğine sahip bir komut dosyası tarafından yapılabilir. İstemci tarafı JavaScript komut dosyası bu yeteneğe sahiptir. Aşağıda, bu dilin yeteneklerini kullanarak imlecin koordinatlarını elde etmek için seçeneklerden biri açıklanmıştır.
Talimatlar
Aşama 1
İmlecin geçerli koordinatlarını almak için olay nesnesinin özelliklerini kullanın. Bu nesne, fare imlecinin koordinatlarını belirlemekle ilgili bir dizi özelliğe sahiptir. LayerX özelliği, geçerli katmanın sol kenarından piksel cinsinden ölçülen mesafeyi ve LayerY - üst kenarından aynı mesafeyi içerir. Bu iki özelliğin eş anlamlıları vardır - event. LayerX yerine event.x yazabilirsiniz ve event. LayerY yerine event.y yazabilirsiniz. pageX ve pageY özellikleri, tarayıcı penceresinin sol üst kenarına göre imlecin yatay ve dikey koordinatlarını tutar ve screenX ve screenY özellikleri, monitör ekranına göre benzer değerleri tutar.
Adım 2
Kodunuza tarayıcı türü denetimi ekleyin ve olay nesnesinde yukarıdaki özelliklere ek olarak clientX ve clientY özelliklerini kullanın. Microsoft, Internet Explorer tarayıcısında farklı bir özellik ataması kullandığı için bu gereklidir. Koordinatları belirlemek için her iki yaklaşımı da birleştirebilirsiniz, örneğin şu şekilde:
if (evevnt.pageX || olay.pageY) {
koordinatX = olay.pageX;
koordinatY = olay.sayfaY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinatX = olay.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = olay.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
Aşama 3
Koordinat tanımlama kodunu özel bir işleve yerleştirin. Örneğin:
function GetMouse (olay) {
var koordinatX = 0, koordinatY = 0;
if (! olay) olay = pencere. olay;
if (evevnt.pageX || olay.pageY) {
koordinatX = olay.pageX;
koordinatY = olay.sayfaY;
}
else if (evevnt.clientX || evevnt.clientY) {
koordinatX = olay.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
koordinatY = olay.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
dönüş {"coordX": koordinatX, "koordinatY": koordinatY};
}
Bu işlev, birincisi (coordX tuşuyla birlikte) X koordinatını ve ikincisi (coordY) Y koordinatını içeren, adlandırılmış iki öğeden oluşan bir dizi döndürür.
4. Adım
Bu işlevi bazı olaylarda çağırın - örneğin, belge bağlamında fareyi hareket ettirme olayında (onmousemove). Aşağıdaki örnek, fare koordinatlarını durum çubuğuna çıkarmak için bir işlev kullanır:
document.onmousemove = işlev (olay) {var CurCoord = GetMouse (olay); window.status = "X koordinatı:" + CurCoord.coordX + "px, koordinat Y:" + CurCoord.coordY + "px";};
