触摸事件不返回触摸数据答案

【问题标题】：Touch Event Not Returning Touch Data触摸事件不返回触摸数据
【发布时间】：2016-03-02 21:07:41
【问题描述】：

编辑：“这不能在 Angular UI 模态中完成”是一个有效的答案，如果情况确实如此。

这是我从触摸事件中获得的返回数据。明显缺少任何有用的触摸 X/Y 坐标 (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches)。这是一个无可救药的通用问题，但是，有什么想法吗？传递给在触摸时执行的函数的“事件”对象：

{
      "originalEvent": {
        "isTrusted": true
      },
      "type": "touchstart",
      "timeStamp": 1450388006795,
      "jQuery203026962137850932777": true,
      "which": 0,
      "view": "$WINDOW",
      "target": {},
      "shiftKey": false,
      "metaKey": false,
      "eventPhase": 3,
      "currentTarget": {},
      "ctrlKey": false,
      "cancelable": true,
      "bubbles": true,
      "altKey": false,
      "delegateTarget": {},
      "handleObj": {
        "type": "touchstart",
        "origType": "touchstart",
        "data": null,
        "guid": 2026,
        "namespace": ""
      },
      "data": null
    }

现在，这是在画布的角度 UI 模式中，但鼠标事件可以正常工作。这是我的元素顺便说一句：

link: function(scope, element, attrs, model){
                //scope.canvasElem = element[0].children[0].children[0];
                scope.canvasElem = angular.element($('.touchScreen'))[0];
                scope.ctx = scope.canvasElem.getContext('2d');

这是我如何绑定的示例：

element.bind('touchstart', scope.touchStart);

编辑，这里有一个mousedown事件对象进行比较：

{
  "originalEvent": {
    "isTrusted": true
  },
  "type": "mousedown",
  "timeStamp": 1450389131400,
  "jQuery20309114612976554781": true,
  "toElement": {},
  "screenY": 436,
  "screenX": 726,
  "pageY": 375,
  "pageX": 726,
  "offsetY": 81,
  "offsetX": 41,
  "clientY": 375,
  "clientX": 726,
  "buttons": 1,
  "button": 0,
  "which": 1,
  "view": "$WINDOW",
  "target": {},
  "shiftKey": false,
  "relatedTarget": null,
  "metaKey": false,
  "eventPhase": 3,
  "currentTarget": {},
  "ctrlKey": false,
  "cancelable": true,
  "bubbles": true,
  "altKey": false,
  "delegateTarget": {},
  "handleObj": {
    "type": "mousedown",
    "origType": "mousedown",
    "data": null,
    "guid": 2025,
    "namespace": ""
  },
  "data": null
}

【问题讨论】：

标签： javascript angularjs touch jqlite

【解决方案1】：

例如，您可以使用指令绑定触摸事件，指令内部可以有这样的代码，

element.on('touchstart', function (event) {
     event = event.originalEvent || event;
     //actions
     event.stopPropagation();   //if you need stop the propagation of the event
});

还需要注意 4 种类型的触摸事件（touchstart、touchend、touchmove、touchcancel）的行为，具体取决于您的目标。用于捕获光标的位置，

element.on('touchmove', function (event) {
    event.preventDefault();
    if (event.targetTouches.length == 1) {  //when only has one target in touch
         var touch = event.targetTouches[0];
        // Place element where the finger is
        var x = touch.pageX + 'px';
        var y = touch.pageY + 'px';
    }
    event.stopPropagation();
});

【讨论】：

【解决方案2】：

var touchRelativeToViewWindow = {
    x: event.originalEvent.touches[0].pageX,
    y: event.originalEvent.touches[0].pageY
};

迟到总比没有好（注意，这是给touchmove）：

在浏览 AngularJs/jQuery 时，我们需要查看 originalEvent 以了解所有详细信息。请注意，[0]part 可能表示多个同时触摸。我不知道它们是如何订购的，但touches[0] 可能是第一根手指，touches[1] 可能是第二根手指。上面的解决方案对我有用，因为我只希望用户使用手写笔。

【讨论】：

这是正确答案。这里有两个问题：1）使用 jQuery 时，您必须使用 originalEvent（如 VSO 此处所述） 2）检查事件对象时，您不能轻易将其转储到 JSON 以查看所有内容 - 事件对象包括 DOM循环的对象引用。因此，尽管它没有出现在 JSON 转储中，但仍有一个 event.originalEvent.touches[] 数组。请参阅此处进行讨论：stackoverflow.com/questions/11547672/…

【解决方案3】：

要获取 x 和 y 坐标，请尝试使用以下代码

x1 = event.touches[0].pageX;
y1 = event.touches[0].pageY;

【讨论】：

事件已发布。他们没有 touches 属性。