震惊，一体机的Touch兼容性居然这么差？

前言

为解决Windows一体机触屏拖拽问题，此代码孕育而生了。

技术选型

主要通过javascript 和 createjs

代码逻辑

触发Touch事件，将Touch事件通过事件代理或事件转发，转发到需要处理的对象身上。

完整代码

(function () {
  "use strict";

  Touch.pos = null;
  Touch.currentEle = null;
  Touch.that = null;
  Touch.actionArr = null;

  Touch.enable = function (actionArr) {
    Touch.that = this;
    Touch.actionArr = actionArr;
    document.getElementById("gameCanvas").removeEventListener("touchstart", Touch.start, false);
    document.getElementById("gameCanvas").removeEventListener("touchmove", Touch.move, false)
    document.getElementById("gameCanvas").removeEventListener("touchend", Touch.end, false);

    document.getElementById("gameCanvas").addEventListener("touchstart", Touch.start, false);
    document.getElementById("gameCanvas").addEventListener("touchmove", Touch.move, false);
    document.getElementById("gameCanvas").addEventListener("touchend", Touch.end, false)
  }

  Touch.disable = function (e) {
    document.getElementById("gameCanvas").removeEventListener("touchstart", Touch.start, false);
    document.getElementById("gameCanvas").removeEventListener("touchmove", Touch.move, false)
    document.getElementById("gameCanvas").removeEventListener("touchend", Touch.end, false);
  }

  Touch.start = function (e) {
    Touch.currentEle = null;
    Touch.pos = Touch.that.getCanvasPosition(this);
    var mouseX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX,
      mouseY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY,
      touchX,
      touchY;
    touchX = Math.round((mouseX - Touch.pos.x) * 1024 / this.offsetWidth);
    touchY = Math.round((mouseY - Touch.pos.y) * 672 / this.offsetHeight);
    for (let idx = 0; idx < Touch.actionArr.length; idx++) {
      if (!Touch.actionArr[idx].parent) continue;
      var pt = Touch.actionArr[idx].globalToLocal(touchX, touchY);
      if (Touch.actionArr[idx].hitTest(pt.x, pt.y)) {
        Touch.currentEle = Touch.actionArr[idx];
        var mouseEvent = new createjs.MouseEvent('mousedown', true, true, touchX, touchY);
        if (document.createEvent) {
          Touch.actionArr[idx].dispatchEvent(mouseEvent);
        } else {
          Touch.actionArr[idx].fireEvent("onmousedown", e);
        }
        break;
      }
    }
  }

  Touch.move = function (e) {
    if (Touch.currentEle) {
      var mouseX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX,
        mouseY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY,
        touchX,
        touchY;
      touchX = Math.round((mouseX - Touch.pos.x) * 1024 / this.offsetWidth);
      touchY = Math.round((mouseY - Touch.pos.y) * 672 / this.offsetHeight);
      var mouseEvent = new createjs.MouseEvent('pressmove', true, true, touchX, touchY);
      if (document.createEvent) {
        Touch.currentEle.dispatchEvent(mouseEvent);
      } else {
        Touch.currentEle.fireEvent("onmousedown", e);
      }
    }
  }

  Touch.end = function (e) {
    if (Touch.currentEle) {
      var mouseX = e.changedTouches ? e.changedTouches[0].pageX : e.pageX,
        mouseY = e.changedTouches ? e.changedTouches[0].pageY : e.pageY,
        touchX,
        touchY;
      touchX = Math.round((mouseX - Touch.pos.x) * 1024 / this.offsetWidth);
      touchY = Math.round((mouseY - Touch.pos.y) * 672 / this.offsetHeight);
      var mouseEvent = new createjs.MouseEvent('pressup', true, true, touchX, touchY);
      if (document.createEvent) {
        Touch.currentEle.dispatchEvent(mouseEvent);
      } else {
        Touch.currentEle.fireEvent("onmousedown", e);
      }
    }
    Touch.currentEle = null;
  }

  window.Touch = Touch;
}());