/Y, clientX/Y ve pageX/Y screenX arasındaki fark nedir?

SORU

20 Mayıs 2011, Cuma

/Y, clientX/Y ve pageX/Y screenX arasındaki fark nedir?

Ayrıca iPad Safari için, hesaplamaları masaüstü YA da benzer görünüm penceresi yüzünden biraz fark var mıdır?

Eğer bir örnek bunu çok iyi olurdu.

CEVAP

17 ŞUBAT 2012, Cuma

JavaScript:

pageX, pageY, screenX, genç, clientX ve clientY verir "css piksel bir noktayı referans noktası. fiziksel sayısını belirten bir sayı Kullanıcı tıklandığında nerede, referans noktası sol üst noktasıdır. Bu özellikler, bu referans noktasından yatay ve dikey mesafeyi döndürür.

pageX ve pageY:
Tamamen işlenmiş içerik alanının sol üst köşesine göre tarayıcıda. Bu referans noktası sol üstte url bar ve Geri düğmesini altındadır. Bu noktada her yerde tarayıcı penceresinde olabilir ve aslında sekmeli sayfaları içinde gömülü ve kullanıcı kaydırma çubuğunu hareket ederse yer değiştirebilir.

screenX ve genç:
Fiziksel ekran/monitör üst sol göre, bu referans noktası sadece eğer artırırsanız taşır ya da monitör ya da ekran çözünürlüğü sayısını azaltmak.

clientX ve clientY:
Tarayıcı penceresinin içerik alanının üst sol kenarı (the viewport) göre. Bu noktada eğer kullanıcı tarayıcıdan bir kaydırma çubuğunu hareket ederse hareket bile etmez.

Bir visual hangi özellikleri destekleyen tarayıcılar için:

http://www.quirksmode.org/dom/w3c_cssom.html#t03

w3schools her ne çevrimiçi Javascript tercüman ve editör var

http://www.w3schools.com/jsref/tryit.asp?filename=try_dom_event_clientxy

<!DOCTYPE html>
<html>
<head>
<script>
function show_coords(event)
{
  var x=event.clientX;
  var y=event.clientY;
  alert("X coords: "   x   ", Y coords: "   y);
}
</script>
</head>

<body>

<p onmousedown="show_coords(event)">Click this paragraph, 
and an alert box will alert the x and y coordinates 
of the mouse pointer.</p>

</body>
</html>