SO position example

Cross browser mouse position within an element

by Oliver Caldwell

HTML

<script src="http://sparkjs.co.uk/assets/downloads/Spark-v1.4.6.js"></script>
<p id='output'>X: 0<br />Y: 0</p>
<canvas width='500' height='500'></canvas>

CSS

canvas {
    background-color: #333333;
}

JavaScript

function findPos(obj) {
    var curleft = curtop = 0;
    
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        
        return [curleft, curtop];
    }
}

Spark('canvas').event('mousemove', function(e) {
    var pos = findPos(e.target);
    Spark('p#output')
        .content('X: ' + (e.pageX - pos[0]) + '<br />')
        .content('Y: ' + (e.pageY - pos[1]), true);
});

var el = document.getElementById('el');
var output = document.getElementById('output');
var pos = findPos(el);
output.innerHTML = pos;
// pageX - pos