Get "mouse" position on touch devices using EaselJS

Question

I'm creating an arcade-styled HTML5 game using the <canvas> tag with EaselJS library, and today I found a problem while trying to implement touch support to it. Can someone help me?

I've successfully implemented the jump action when the user touch the hero, but now I want to add two more things: The hero will walk to the left if the user touches the left side of the screen, and to the right when the user touch the right side of the screen. Also, I was thinking about implementing the jump when the user touch the screen using two fingers also but I don't know if this is possible, if it isn't, then I'll need other way to implement jumps while walking.

I think the problem solution is something really simple but searching for it didn't help, I've found really complicated answers and my objective is to maintain code simplicity as much as possible. Thanks in advance.

Here's the relevant code:

        var x = 0, y = 0;
        document.addEventListener("mousemove", function(e){
            x = e.pageX,
            y = e.pageY;
        });
        document.addEventListener("mousedown", function(e){
            if (!key.holdingUp) { // Checks if event was fired again before "mouseup"
                if(x > hero.x+hero.width+hero.offset){
                    key.right = true;
                }
                if(x < hero.x-hero.offset){
                    key.left = true;
                }
                if(x > hero.x-hero.offset && x < hero.x+hero.width+hero.offset){
                    key.up = true;
                }
            }else{
                key.up = true;
            }
        });
        document.addEventListener("mouseup", function(){
            setTimeout(function(){
                key.up = false;
                key.right = false;
                key.left = false;
                key.holdingUp = false;
            },1000/60); // Wait for one tick loop
        });

JSFiddle (The relevant code starts in line 160)

Answer 1

Here's working fiddle: http://jsfiddle.net/4ABMN/4/

I've tested it on Firefox for Android. I followed this guide: http://www.createjs.com/tutorials/Mouse%20Interaction/

Essentially, you need to use framework events instead of straight DOM:

stage.on("stagemousedown", function(evt) {
    alert("the canvas was clicked at "+evt.stageX+","+evt.stageY);
})

EDIT:

I forgot to mention, you need to add this line:

createjs.Touch.enable(stage);