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?

, 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:

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>
<h2 id="status">
0, 0</h2>

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:

<script src="jquery.js" type="text/javascript"><!--mce:4--></script>
<script type="text/javascript"><!--mce:5--></script>
<h2 id="status2">
0, 0</h2>
<div id="special" style="background: #cccccc none repeat scroll 0% 0%; width: 100px; height: 100px;">
Herhangi bir yere tiklayin</div>

Kaynak kodları:

0, 0

Herhangi bir yere tiklayin

Kaynak kodları:

<script src="jquery.js" type="text/javascript"><!--mce:8--></script>
<script type="text/javascript"><!--mce:9--></script>
<h2 id="status2">
0, 0</h2>
<div id="special" style="background: #cccccc none repeat scroll 0% 0%; width: 100px; height: 100px;">
Herhangi bir yere tiklayin</div>

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

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, sesli chat

Belki şu konular da ilginizi çekebilir: