EaselJS Touch & Mouse Events | Lucentminds Web Development

EaselJS makes it easy for me to add events to visual elements on an html canvas. EaselJS is packaged with CreateJS and is used by Adobe as their go to library for translating their Animate CC files to be used by your browser’s canvas element. When creating touch events for elements on an EaselJS stage, there are a few “gotchas” you need to be aware of in order to properly capture and prevent bubbling of those events back to the web page.

By default an EaselJS canvas does NOT listen for any touch events even if you add an event listener for said events using the EaselJS library. This includes touchstart, touchmove, touchend, and touchcancel. If you must explicitly detect touch events or at least detect the corresponding mouse events on touch devices, you first tell EaselJS that you are going to be adding event listeners for touch events using “createjs.Touch.enable()” For example:

var stage = new createjs.Stage( 'myCanvasId' );

// Enable touch events on this stage.
createjs.Touch.enable( stage );

Now you can listen for both touch and mouse events, but if a user tries to touch-scroll the page by putting their finger on the canvas, the page will NOT scroll. This is because the canvas is capturing the touchstart event and not letting it bubble up to the document. If we want to allow touch-scrolling from the canvas element we have to allow default gesture actions and to NOT allow EaselJS to prevent selection touches.

var stage = new createjs.Stage( 'myCanvasId' );

// Enable touch events while allowing the touch events to bubble up to the document.
createjs.Touch.enable( stage, false, true );

// Don't let the stage to automatically prevent default touch events.
stage.preventSelection = false;

Now when you listen for touch events on the stage, you can also allow the user to scroll away from the stage canvas. The only problem is that if you listen for the touchmove or mousemove event on anything in the stage, it’s not straight forward how to capture the move event and stop it from bubbling back to the document. This happen to me while I was creating a horizontal slider control. The slider was made to slide an image along it’s x-axis on the stage and not scroll the page while doing so. Normally when you create a listener for an event like this, you just use something like “event.preventDefault()” to stop the page from doing anything with the event, but this doesn’t work as expected in EaselJS. To make this work, you have to prevent the default event on the nativeEvent object like this…

var stage = new createjs.Stage( 'myCanvasId' );

// Enable touch events while allowing touch events to bubble up to the document.
createjs.Touch.enable( stage, false, true );

// Don't let the stage to automatically prevent default touch events.
stage.preventSelection = false;

// Create a circle drawing.
var circle = new createjs.Shape();

circle.setStrokeStyle( 1 )
circle.beginFill( 'red' )
circle.drawCircle( 0, 0, 30 );

// Add the circle to the stage.
stage.addChild( circle );

// Listen for the "mousedown/touchstart" event on the circle and don't let it bubble.
circle.addEventListener( 'mousedown', function( event ){
	event.nativeEvent.preventDefault();
}, false );

Now if you try and scroll away from the canvas, the page will scroll away as expected. If you try to scroll away from the circle on the canvas, the page will NOT move. I hope this saves you the time and frustration that I had while solving this.

Code based on EaselJS v0.8.2.

Scott