HTML5 Canvas and Firefox 4 - Getting click coordinates

I've been working on a bunch of HTML5 Video and Canvas demos. Til now I focused on Chrome, but now I'm trying to optimize them for Firefox and Safari as well.

The one I'm working on right now draws a video in Canvas and moves the video to mouseclick positions. What I have so far works in Chrome and Safari, but not in Firefox. I haven't been able to find much info on these topics (click events, coordinates, firefox-specific etc). I copied the code from here:

How do I get the coordinates of a mouse click on a canvas element? http://answers.oreilly.com/topic/1929-how-to-use-the-canvas-and-draw-elements-in-html5/

because they gave me the impression it should work in all browsers, but Firefox still refuses. All it does is display the video, it doesn't react to mouse clicks.

This is my code (not including the definition of variab开发者_高级运维les):

function activateVideo(){
setTarget();
videoElement.play();
animate();
}

function setTarget(){   
targetX=xCoord;
targetY=yCoord
moverX=(targetX-currentX)/100;
moverY=(targetY-currentY)/100;  
}
canvasElement.addEventListener('click', function(){
    /*xCoord = event.clientX - canvasElement.offsetLeft;
    yCoord = event.clientY - canvasElement.offsetTop;
    txtCount.value = xCoord + " + " + yCoord;*/
    if (event.pageX || event.pageY) {
        xCoord = event.pageX;
        yCoord = event.pageY;
    } else {
        xCoord = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        yCoord = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    xCoord -= canvasElement.offsetLeft;
    yCoord -= canvasElement.offsetTop;
    setTarget();
},false);

function animate(){
currentX += moverX;
currentY += moverY;
if(dist(currentX,targetX,currentY,targetY)<1) {
    moverX=0;
    moverY=0;
}
drawVideo(videoElement,context,320,256);
timer = setTimeout(animate,20);
}

function dist(x1,x2,y1,y2){
return Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
}

function drawVideo(videoElement,context,w,h) {
context.clearRect(0,0,1000,600);
context.drawImage(videoElement,currentX,currentY,w,h);
}
playCanvas.addEventListener('click', activateVideo, false);

So obviously I'm a bit lost, if anybody could point me in the right direction, I would appreciate it.

I have a working version of this that uses jquery, which is likely the most cross-browser way of doing it. It's not that bad. Here's my fiddle http://jsfiddle.net/jaredwilli/D3PWN/

Code

var canvas = $('canvas');
canvas.mousemove(function(e){
    var pageCrds = '('+ e.pageX +', '+ e.pageY +')',
        clientCrds = '('+ e.clientX +', '+ e.clientY +')';

    $('span:first').text('(e.pageX, e.pageY) - '+ pageCrds);    
    $('span:last').text('(e.clientX, e.clientY) - '+ clientCrds);

});

var arr = [];
canvas.click(function(e) {
    arr.unshift($('span.first').text());
    console.log(arr);
});

Hope this helps you out some. :)

You need to pass the event object to the handler for FF (IE works becuse event is available via window.event)

canvasElement.addEventListener('click', function(event){
   event = event || window.event;
   ...