Quickfix to enable touch of EaselJS-DisplayObjects in CocoonJS

So while on the Stage touch is working for EaselJS in CocoonJS, it is currently not possible to touch individual EaselJS-DisplayObjects in CocoonJS. I wrote a quick fix for that, in case anyone else needs it.

Download: easeljs_cocoonjs_touchfix.js

(updated version to work with EaselJS 0.7+, thx to Jonny)
How to use: Download JS-fix and implement it through a script-tag somewhere after the EaselJS-script-tag and your done!

Hope this helps someone, comment for any issues,cheers!

If you use an older version of EaselJS: easeljs_cocoonjs_touchfix_pre_0.7.js (for pre-EaselJS 0.7)

  • Jake

    Thanks, works like a charm!

  • Spencer

    So good of you to publish this. I’d never have solved it myself. Thank you.

    • olsn

      No problem :)
      Just FYI – this is probably going to be fixed with the release of the next CocoonJS version ;-)

  • James

    Another thanks from me! Great work.

  • Richard

    works great.. thanks!

  • Jonny

    For those who are updating to the latest EaselJs 0.7

    createjs.Stage.prototype._updatePointerPosition = function(id, pageX, pageY) {

    to

    createjs.Stage.prototype._updatePointerPosition = function(id, e, pageX, pageY) {
    (add ‘e’ after ‘id,’)

    and add this line to the code

    o.posEvtObj = e;

    not sure if its important where it is added but I added it on line 36 above o.rawX=pageX; is

    • Holger

      THX! That really saved my day!

  • klanco

    Hi I´m trying the workaround posted here but I´m still not getting results. The error message that I get is :

    Javascript Exception TypeError: Object # has no method ‘_getElementRect’

    The application works well in the browser.

  • klanco

    I sorry, I mispelled the error

    Javascript Exception TypeError: Object # has no method ‘_getElementRect’

    • klanco

      Ok problem solved, I had to put the code in a window.onload function

  • Adam

    Thanks!

  • Mysterarts

    Thanks a lot Olaf (and Jonny!)

  • ramesh

    EaselJS Button events are not working with your code. it is working only stage events.

  • http://vincibleweb.com Vince Wong

    You’ve been a massive help – thanks.

  • Bitrogue

    Works fine on iOS and most Android devices, but some have rather interesting problem where my sprites with onclick function seem to take over the whole canvas?

    • http://www.vincibleweb.com Vince Wong

      I’ve had a similar problem: on Android 4.4.2, hit detection for touch events works fine; however, on Android 4.0.3, I’m getting unpredictable results.

      Sometimes, I have the problem you reported where touch events are firing on display objects that aren’t beneath the touch location (some object always seems to be hit, and it doesn’t seem related to its position relative to the touch location). However, the majority of times I’ve tried it on Android 4.0.3, a touch event never fires, even if an object appears beneath the touch location.

      I’ve traced the issue to createjs.Container.prototype._getObjectsUnderPoint (Stage inherits from Container). Without the above touch fix, x and y passed into this function are always 0, so the touch fix is required. In the case where no events fire, _getObjectsUnderPoint seems to be returning null always. I can only *assume* that in the case where events are firing erroneously, the function is returning objects it shouldn’t be (false positives).

      I’ve further traced this to the way the function performs hit detection i.e. by drawing each child to a canvas (with appropriate transform matrix), and then testing whether the alpha channel is > 1 (see _testHit). For some reason, this is going wrong on some Android versions. I’ve not been able to determine why, so my rather unsatisfactory workaround is to replace this hit test mechanism with a faster, but more rudimentary hit test where I assume each child display object is a rectangle. I obviously have to take scaling and registration points into account. I can post this somewhere if you’re interested?

      • http://www.vincibleweb.com Vince Wong

        P.S. The “window.onload = fixCocoonEaselJSStageTouch” at the bottom of the touch fix should probably be replaced with “window.addEventListener(‘load’, fixCocoonEaselJSStageTouch);”. This would prevent overwriting of any existing global event handler, and also prevent the risk of being overwritten by another global event handler!

      • Bitrogue

        I’m interested! I do not own a device that would have this problem for debugging (have to rely on feedback from released app) and any kind of quickfix would be awesome as do not have need for complicated touch detection (only rectangles).

  • Jimmy

    This fix doesn’t seem to work with the cdn / minified version of CreateJS?

  • TheManuz

    Thank you very much, it was simple and worked fine!

  • Leandro

    I cant get this fix work for me. Doesnt work the touch event for button.Is this correct way to catch button click/touch event?:
    play.addEventListener(“click”, function(e)
    {
    console.log(“click”);
    });

    When I click on button catches the event of stage touch.

  • nick

    Hi. I’m trying to use this and having no luck.
    On iOS everything in cocoonjs works fine. On Android its firing events after touching anywhere on the stage.
    I’m including the fix script after my easeljs one.
    I have createjs.Touch.enable(stage); enabled.
    I’m using easeljs-0.7.1.

    Is Android 4.1.1 just too old?