wie offsetX dass relativ zum übergeordneten div bekommen, wenn ich ein div mit jquery klicken

Question

dies ist mein Code:

<div id="a" style="position:absolute;width:200px;height:200px;background:red;word-wrap:break-word;"> 
      <div id="b" style="width:50px;height:50px;background:blue;"></div> 
</div> 

das Skript ist:

$("#b").draggable({ containment: 'parent' }); 
$('#a').click(function(e){ 
     alert(e.pageX) 
     //return false; 
    }) 

die e.pageX relativ zu die window,

Wie bekomme ich die x, y relativ zu den Eltern div?

die Demo ist hier: http://jsfiddle.net/KwYjr/2/

dank

Answer 1

finden Sie in der folgenden Dokumentation für Informationen über das Event-Objekt in jQuery: http://api.jquery.com/category/events/event-object/

Sie werden sehen, dass es normalisiert (macht das gleiche über Browser) einige der Eigenschaften, aber nicht alle. Die, die Sie brauchen, ist .offsetX.

http://jsfiddle.net/KwYjr/3/

Beachten Sie, dass .offsetX nicht immer in einigen Browsern definiert ist. In der Regel gibt es eine alternative Variable, die verwendet werden kann. Andernfalls erhalten Sie die .offset() Position des Elements, von dem Sie den Wert möchten, und verwenden Sie dann .pageX damit.

Versuchen Sie es mit e.pageX - e.target.offsetLeft: http://jsfiddle.net/KwYjr/7/