Help us understand the problem. What is going on with this article?

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

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

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

freee
スモールビジネスのバックオフィス業務をテクノロジーで自動化し、日本のスモールビジネスを元気にする
http://www.freee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away