Tıklayın nasıl jQuery kullanarak hedef öğe üzerinde koordinatları

SORU

13 Temmuz 2010, Salı

Tıklayın nasıl jQuery kullanarak hedef öğe üzerinde koordinatları

Benim html öğesi için aşağıdaki olay işleyicisi var

jQuery("#seek-bar").click(function(e){
    var x = e.pageX - e.target.offsetLeft;
    alert(x);    
});

Üzerinde fare pozisyon bulmam lazım #-bar isteyin tıklayarak. Yukarıdaki kod çalışması gerektiğini düşünmüştüm, ama yanlış sonuç verir

CEVAP

13 Temmuz 2010, Salı

Öğe ( veya ) sadece fare işaretçisi fare işaretçisinin konumunu relative konum almaya çalışıyorsun< / ^ br .< / ^ br . Bu Demo deneyin : http://jsfiddle.net/AMsK9/

Düzenleme :

1) event.pageX, event.pageY fare konumu göreli belge verir !

Ref: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

2) offset() : bir element . ofset konumunu verir

Ref: http://api.jquery.com/offset/

3) position() : bir öğenin göreli Konumu yani

bir elementin başka bir element içinde gömülü olduğunu düşünün

örnek:

<div id="imParent">
   <div id="imchild" />
</div>

Ref: 17**

HTML

<body>
   <div id="A" style="left:100px;"> Default    <br /> mouse<br/>position </div>
   <div id="B" style="left:300px;"> offset()   <br /> mouse<br/>position </div>
   <div id="C" style="left:500px;"> position() <br /> mouse<br/>position </div>
</body>

JavaScript

$(document).ready(function (e) {

    $('#A').click(function (e) { //Default mouse Position 
        alert(e.pageX   ' , '   e.pageY);
    });

    $('#B').click(function (e) { //Offset mouse Position
        var posX = $(this).offset().left,
            posY = $(this).offset().top;
        alert((e.pageX - posX)   ' , '   (e.pageY - posY));
    });

    $('#C').click(function (e) { //Relative ( to its parent) mouse position 
        var posX = $(this).position().left,
            posY = $(this).position().top;
        alert((e.pageX - posX)   ' , '   (e.pageY - posY));
    });
});