CreateJSのイベントとDOMのイベントは独立しているため両者のイベント共存させるためには少し注意が必要です。 たとえば次のような構造を考えてください。
<body> # HTMLBodyElement
\---<canvas> # HTMLCanvasElement
\---stage # createjs.Stage
\---cotainer # createjs.Container
\---shape # createjs.Shapeここでshapeをクリックするとclickイベントは、
- shape
- container
- stage
- <canvas>
- <body>
という風にbubble upしていくようにみえます。これを防ぎたいとき、
一般的にはイベントハンドラ内で stopPropagation を呼び出せばよいように思いますが、
たとえばshapeのclickイベントハンドラの中でstopPropagationした場合、
あくまでcreatejsのイベントのbubble upを防いだだけにすぎず、
次のようにDOMのイベントは影響を受けずに発生しています。
- shape
- <canvas>
- <body>
shape.addEventListener('click', function(e) {
e.stopPropagation();
}これはcreatejsのイベントと、DOMのイベントがそれぞれ独立していることが原因です。
※ そもそも、createjsのstopPropagationは/src/CreateJS/events/Event.jsに定義されています。
DOMのbubble upも防ぎたい場合は、canvasでもstopPropagationを行わないといけません。
document.getElementById('canvasID').addEventListener('click', function(e) {
e.stopPropagation();
}しかし、このようにしても、createjsのイベント、
canvasのイベントがそれぞれ1回発生することになり、
これは少なくとも stopPropagationでは防ぎようがないように感じます。
（なにか別の方法があるかもしれません）
- shape
- <canvas>
したがって、canvasにはあまり特殊なイベントを挿入しないほうが、コードが複雑になりにくいと思います。
CreateJSとDOMのイベントを共存させたい場合、次のようにするのが良いと思われます。
- <canvas>のクリックをハンドルしたい場合はcreatejs.Stageで代替する、
- <canvas>では
stopPropagationを行い、他のDOMオブジェクトへのbubble upを防ぐ