Коснитесь события, не возвращающего данные касания

Изменить: "Это не может быть сделано в Angular Модификации пользовательского интерфейса" - это правильный ответ, если это действительно так.

Это данные возврата, которые я получаю от события касания. Заметно отсутствуют любые удобные сенсорные 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
    }

Теперь это IS в модальном холсте Angular в холсте, но события мыши работают нормально. Вот мой элемент btw:

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
}

Ответ 1

Например, вы можете привязывать события касания с помощью директив, внутри директивы может быть такой код,

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

также необходимо проявлять осторожность в отношении поведения четырех типов сенсорных событий (touchstart, touchhend, 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

Чтобы получить координаты x и y, попробуйте использовать ниже код

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

Ответ 3

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

Лучше поздно, чем никогда (обратите внимание, что это для touchmove):

При переходе через AngularJs/jQuery нам нужно посмотреть в originalEvent для всех деталей. Обратите внимание, что часть [0] может указывать на несколько одновременных касаний. Я не знаю, как они упорядочены, но touches[0] может быть первым пальцем, а touches[1] может быть вторым пальцем. Решение выше работало для меня, потому что я только ожидаю, что пользователь будет использовать стилус.