Bir öğenin pageX ve pageY olayı kullanmadan nasıl olacağı

Question

Herhangi bir öğenin e.pageX ve e.pageY kullanmadan konumlandırılması var mı?

Kontrol bu fiddle

keman aslında sormaya çalışıyorum ne im de zayıf bir girişim olduğunu, ama bir görsel örnek daha iyi olurdu ama. i rağmen: Ne i olduğunu bilmek istiyorum, bu

document.getElementByID('elementID'); 

ya da belki

document.getElementsByTagName('TagName'); 

DÜZENLEME kullanarak başvurarak DOM üzerindeki herhangi bir öğenin X ve Y koordinatlarını bulmak mümkün mü FIDDLE'da Jquery kullandı, ben sadece JavaScript kullanarak olası bir çözüm istiyorum.

Answer 1

Sen

document.getElementById("elementID").offsetTop; 
document.getElementById("elementID").offsetLeft; 

MDN bakınız kullanabilir. Ofsetleri ana elemandan döndürürler. Elementin tüm vücuda göre ofsetine ihtiyacınız varsa, zincirdeki her bir elemanın ofsetlerini toplamlamanız gerekeceği için daha da zorlaşabilir.
.getElementsByTagName için, DOM'deki her nesne bu özniteliklere sahip olduğundan.

.getBoundingClientRect da worth a look numaralı makaledir.

var clientRectangle = document.getElementById("elementID").getBoundingClientRect(); 
console.log(clientRectangle.top); //or left, right, bottom 

Answer 2

Sanırım ofset() çalışmalıdır.

$(element).offset() //will get {top:.., left:....} 

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$("#something").click(function(e){ 
 
    var parentOffset = $(this).parent().offset(); 
 
    //or $(this).offset(); if you really just want the current element's offset 
 
    var relX = e.pageX - parentOffset.left; 
 
    var relY = e.pageY - parentOffset.top; 
 
}); 
 
</script>

Answer 4

Burada hemen hemen tüm jquery şeyler bulabilirsiniz: http://youmightnotneedjquery.com/

$(el).offset(); 

aynı şekilde:

var rect = el.getBoundingClientRect(); 

{ 
    top: rect.top + document.body.scrollTop, 
    left: rect.left + document.body.scrollLeft 
}