mouseeventeaseljsanimate-cc

How do i prevent mouse and touch events from trigger for DisplayObjects below a backdrop


I have several display objects in createjs and event using easeljs i want to prevent from mouse and touch event passing through them.

i want like a easy one liner like .mouseEnabled or .mouseChildren is there something will will prevent any other interaction for the objcts below this. i can try adding all events to a backdrop movieclip which tint background color and prevent default and stopPropogation will that help?

so how to i prevent from any type of interaction taking place in canvas just by placing a displayobject that's like wall which will not allow the other displayobjects from getting click, mouseover or touch events.


Solution

  • You can add obj.mouseEnabled= obj.mouseChildren = false; to any you don't want to receive events.

    If you just want to block events with a child on top, simply add a mouse handler to it.

    cover.on("click", function(){});
    

    You don't need stopPropagation, since that will only prevent events from bubbling in the current hierarchy (ie, surfacing an event to its direct parent). Events do not "pass through" objects that have mouse handlers on them.

    Hope that helps!