修正 fabric.js 在 android 移動物件時頁面捲動

最近被回報 Fabric.js 在 Android 手機上，移動物件時會造成頁面滑動。
去看了一下 fabric 的原始碼，原來他是利用 e.preventDefault() 來避免頁面捲動的。
原始碼：http://fabricjs.com/docs/fabric.js.html#line10465

   /**
     * @private
     * @param {Event} e Event object fired on mousemove
     */
    _onMouseMove: function (e) {
      !this.allowTouchScrolling && e.preventDefault && e.preventDefault();
      this.__onMouseMove(e);
    },

然後就找到這篇，原來 Chrome 為了讓瀏覽器速度變快，所以新增了 passive 參數讓 touch event 不會在 calling stack 中藉由 preventDefault() 給取消掉。而且這個參數在 Chrome 56 以後預設為 true。

window.addEventListener("touchstart", func, {passive: true} );

請見:

• Treat Document Level Touch Event Listeners as Passive
• Making touch scrolling fast by default

那麼要怎麼樣避免捲動呢？Chrome 給的答案是增加 CSS touch-action 為 none

#canvas-parent {
 touch-action: none;
}

請見: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[連結] Javascript 教學: JavaScript Stack from Scratch

This is a straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them.

https://github.com/verekia/js-stack-from-scratch