Question

I have a layout similar to

<div id="outer">  
     <div id="inner"></div>  
</div>

with a mouse event for the ‘outer’ element.

I am accessing the mouse coords of the event using jQuery’s mouseup event with the layerX and layerY values.

When a click is received on the ‘inner’ element, it gives the coords of the click relative to the ‘inner’ element. Is it possible that when a click is given to the element, it can give the mouse coords relative to the outer element

Basic overview of what I have:

$('#outer').mouseup(function(e){  
    // do stuff with  
    //e.layerX  
    //e.layerY  
}

Answer 1

jQuery doesn’t have a built in way to do this, however you could calculate what you are looking for in the way you are describing. However a simpler way would be to always get the mouse position relative to the document, and then subtract the #outer elements position relative to the document:

var $outer = $('#outer');
$outer.mouseup(function(e) {
    var offset = $outer.offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
});