Search code examples
htmlcanvaseaseljscreatejs

How to handle fast clicks on iPhone with Easeljs?


I made a simple game with Easeljs. Basically it's a clicking game, where user has to continuously click a button at a fast speed.

It works perfectly on Android and any PC browser. However, when I test it on iPhone I find that when user clicks fast, the onclick event is never fired. When user clicks slowly it works fine.

I suspect that it has something to do with safari's double tap gesture. I tried fastclick, it didn't help.

Here's the Html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <script src="createjs-2015.05.21.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="init();">
    <div class="main">
        <canvas id="testCanvas" height="1000" width="1000"></canvas>
    </div>
    <script src="app.js"></script>
</body>
</html>

And here's how I add the button:

var button = new createjs.Bitmap(loader.getResult("button"));
var hitArea = new createjs.Shape;
hitArea.graphics.beginFill("#000").drawRect(0, 0, 500, 500);
button.hitArea = hitArea;
button.addEventListener("click", buttonOnClick);

stage.addChild(button);

function buttonOnClick(event) {...}

Thanks in advance!


Solution

  • I added

    createjs.Touch.enable(stage);
    

    and fixed it.