Skip to content

Instantly share code, notes, and snippets.

@retorillo
Last active November 23, 2015 07:54
Show Gist options
  • Save retorillo/a6e522270f967eaef2a3 to your computer and use it in GitHub Desktop.
Save retorillo/a6e522270f967eaef2a3 to your computer and use it in GitHub Desktop.

CreateJSのイベントとDOMのイベントの共存

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 を呼び出せばよいように思いますが、 たとえばshapeclickイベントハンドラの中で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を防ぐ

関連リンク

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment