jQuery Events: Mouse Pozisyonu

jQuery Events: Mouse Pozisyonu

Mouse ‘ın pozisyonunu bulma işlemi için hazırlanmış bazı örneklere bu makalede ulaşabilirsiniz. Elimden geldiğince itinalı bir şekilde bu makaleyi çevirmeye özen gösterdim, işinize yarayacağını umuyorum :)

Yazar: Patrick Hall , Çeviri: Mehmet Tahta

Bu makaleyi 4 ana başlık altında inceleyeceğiz.

1. Mouse pozisyonunu nasıl bulabilirim?
2. Mouse pozisyonunu takip etmek.
3. DIV’e nereden tıklanılmış?
4. Mouse pozisyonunu gösteren eklentiler.

Mouse Pozisyonunu nasıl bulabilirim?

jQuery, mouse pozisyonunu kolay bir şekilde algılamayı sağlar. Bunu yapabilmek için ise event’lerin .pageX ve .pageY özniteliklerini öğrenmeliyiz. Bu öznitelik de bize mouse’un nerede olduğunu pixel olarak gösterir.

Mouse Pozisyonunu takip etmek
Farenizi hareket ettirdiğinizde gördüğünüz gibi değerler sürekli olarak okunuyor ve güncelleniyor:

0, 0

Yukarıda gördüğünüz örneğin kaynak kodu aşağıdaki gibi:

0, 0

DIV’e nereden tıklanılmış?

.pageX ve .pageY herhangi bir event içerisinde iyice okunabilir, sadece .mousemove() ile değil.
Örneğin, belki siz tam olarak DIV içerisinde nereye tıklanıldığını öğrenmek istiyorsunuz:
İşte size bir örnek:

0, 0

Kaynak kodları:

0, 0

Kaynak kodları:

0, 0

(Unutmamak gerekiyor ki pixel değerleri dosyanın tamamı ile ilişkilidir. Eğer belirli bir elementin pozisyonunu hesaplamak isterseniz, offsetY ve offsetX değerlerine bakabilir, ve biraz aritmetik kullanarak ilişkili değeri bulabilirsiniz.)

İşte size spesifik bir elementin pozisyonunu bulma hakkında bir örnek:

   $("#special").click(function(e){

	var x = e.pageX - this.offsetLeft;
	var y = e.pageY - this.offsetTop;

      $('#status2').html(x +', '+ y);
   });

Mouse pozisyonunu gösteren eklentiler

Aşağıdaki eklentileri inceleyip kullanabilirsiniz.

• Jörn Zaefferer’s tooltip plugin
• Cody Lindley’s Thickbox
• Klaus Hartl’s Tabs plugin
• Interface by Stefen Petre with Paul Bakaus
• diğerleri?

Yardımlarından dolayı nlogax, Getty, John, ve diğer irc kullanıcılarına teşekkürler!

Kaynak gösterdiğiniz taktirde istediğiniz platformda paylaşabilirsiniz. Bu arada sayfa içerisinde bazı kodlar bozuk gözüküyor, yani uygulama tam olarak çalışmıyor. Belirtilen kodları kendiniz test ettiğinizde herhangi bir sorun yaşamıyorsunuz, bilginize.

Yazar: Mehmet Tahta
Kaynak: JQuery Events: Mouse Pozisyonu
Sponsor Bağlantılar: hosting