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

Question

Редактировать: «Это невозможно сделать в Угловом UI Modals», это правильный ответ, если это так.

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

Edit, а вот 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 
} 

Answer 1

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

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

Answer 2

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

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(); 
}); 

Answer 3

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

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

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