Edited at

CreateJSとfastclickを一緒に使うときの注意点

More than 5 years have passed since last update.

fastclickを有効にしたDOMの中で

CreateJSのオブジェクトにclickで登録したイベントが

呼ばれないという現象が起きます。(iOS/Android実機)

shape = new cjs.Shape()

shape.graphics
.f '#f00'
.r 10, 10, 100, 100
.ef()
shape.addEventListener 'click', ->
console.log 'shape clicked'
stage.addChild shape
stage.update()


原因


EaselJS

mouseupと直前のmousedownがヒットエリア内にあれば

clickで登録したイベントを呼ぶ。

Canvasが直接clickを拾っている訳ではない模様。

https://github.com/CreateJS/EaselJS/blob/release_v0.7.1/src/easeljs/display/Stage.js#L701


fastclick

touchendのタイミングで強制的にclickを発火させる

https://github.com/ftlabs/fastclick/blob/v1.0.0/lib/fastclick.js#L573

という仕組みになっているため相性が悪いようです。


対策


  • ターゲットがCanvasの場合はmouseup, mousedownも発火させるようにする

https://github.com/t93/fastclick/commit/b74983f99f5dbaac14bf76bdc4827b0471a86d1a

だいぶ雑な感じですが一応これで動きました。

もっと良い方法あったら教えてもらえると嬉しいです。