HTML5 addEventListener useCapture doesn't bubble

Has anyone else found that the HTML5 addEventListener useCapture doesn’t bubble anymore? I’m sure this was working a few months back.

Would mind writing a quick code sample (or pseudo code) that helps show what isn’t working now?

Sure thing.

Trace Results:
AS3 Flash
AddTest onViewAddedToStage
Main onViewAddedToStage = child
Main onViewAddedToStage = child

OpenFL Flash Target:
AddTest.hx:23: AddTest onViewAddedToStage
Main.hx:25: Main onViewAddedToStage = child
Main.hx:25: Main onViewAddedToStage = child

OpenFL HTML5 Target:
AddTest.hx:23: AddTest onViewAddedToStage

//////////////////////////////////////////////////////////////////////////////////////

package com.imag.useCaptureExample;

import com.imag.robotlegsHaxe.view.AddTest;
import openfl.display.Sprite;
import openfl.events.Event;

/**

  • @author P.J.Shand
    */
    class Main extends Sprite
    {
    public function new()
    {
    super();

     var test:AddTest = new AddTest();
     test.name = 'AddTest';
     test.addEventListener(Event.ADDED_TO_STAGE, onViewAddedToStage, true);
     addChild(test);
    

    }

    private function onViewAddedToStage(e:Event):Void
    {
    removeEventListener(Event.ADDED_TO_STAGE, onViewAddedToStage);
    trace("Main onViewAddedToStage = " + e.target.name);
    }
    }

//////////////////////////////////////////////////////////////////////////////////////////

package com.imag.useCaptureExample;

import flash.events.Event;
import openfl.display.Sprite;

/**

  • @author P.J.Shand
    */
    class AddTest extends Sprite
    {

    public function new()
    {
    super();

     trace("AddTest");
     
     addEventListener(Event.ADDED_TO_STAGE, onViewAddedToStage);
    

    }

    private function onViewAddedToStage(e:Event):Void
    {
    removeEventListener(Event.ADDED_TO_STAGE, onViewAddedToStage);

     trace("AddTest onViewAddedToStage");
     
     var test:Sprite = new Sprite();
     test.name = "child";
     addChild(test);
    

    }
    }

Thanks! I will try and look at this soon :smile:

Cool, let me know if you get the same result.

Okay, just took a deeper look, and it appears that we do not handle the capture phase quite right :frowning:

the “at target” and “bubbling” phases do appear to work correctly, it’s more unusual to do the capture phase in production code, that’s why we haven’t seen this before.

Do you think there’s any way to get your code working using the bubbling phase instead of the capture phase?

Good to know i wasn’t just going crazy…
Unfortunately no, not in my case, as it’s core functionality of a library I’m porting that is very abstracted from non library code. Is it something that technically can be fixed? or is it a js limitation?

Yep, this can be fixed, in Flash, there is a “capture” phase to go down and find the hit target, then a “target” phase where it dispatches events from the target, then it “bubbles” back up to anything listening to a bubbling event. We’ve pretty well tested, I guess, the second and third phases, but we don’t dispatch capture events on the way down.


Actually, it looks like we have some handling for capture events, just if you manually dispatch from a Sprite, it doesn’t grab the stack for capture events, only the ones dispatched from the top. I’m sure there’s a way to do it, it just requires careful work, due to the nuances of how the event model behaves

I’ve made a change to OpenFL to resolve this issue for Event.ADDED_TO_STAGE

It would be great to incorporate this into the official OpenFL, however will need to be reviewed.
It probably needs to lose the:
if (event.type == Event.ADDED_TO_STAGE){