Skip to content

Mouse Positioning broken when canvas is position:fixed #132

Closed
earlPeriscopic opened this Issue Apr 4, 2012 · 2 comments

3 participants

@earlPeriscopic

I am creating a project in easeljs and I set the canvas to fixed so that when I scroll it stays put and I can get the scroll position to move things around in canvas. However since the mouse positioning uses e.pageX and e.pageY I'm not getting proper hit testing since the pageY returns a different number as I scroll.

For my instance of easel I adjusted this to use e.clientY instead which fixed my problem. I know that won't work for every instance but some sort of setting for this would be really helpful.

@wdamien
CreateJS member
wdamien commented May 22, 2012

Some sample code that repos the issue, just scroll the div tag down and try to click the box.

<!DOCTYPE html>
<html>
<head>
    <title>Mouse Bug</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>

    <script type="text/javascript">

        function init() {
            var canvas = $('<canvas width="150" height="300" />');
            var stage = new Stage(canvas.get(0));

            canvasHolder = document.getElementsByClassName('canvasHolder')[0];
            canvasHolder.appendChild(canvas.get(0));

            var sprite = new Shape();
            sprite.graphics.beginFill('#000').drawRect(50,50,25,25);
            sprite.onClick = function () {
                alert('Click!');
            };

            stage.addChild(sprite);
            stage.update();
        }

    </script>
</head>

<body onload="init();">
    <div class="canvasHolder" style="overflow: scroll; padding-left:25px; float: left; height: 150px"></div>
</body>
</html>
@gskinner
CreateJS member

Can you test this with the most recent build, I made some changes that I think should fix this. Please reopen if not.

@gskinner gskinner closed this Aug 23, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.