Dotykowe zdarzenie, które nie zwraca danych dotyku

Question

Edycja: "Nie można tego zrobić w modułach Angular UI" jest poprawną odpowiedzią, jeśli tak jest w rzeczywistości.

To są dane, które otrzymuję z wydarzenia dotykowego. Brakujące wyraźnie są wszelkie przydatne dotykowych X/Y coords (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). Jest to beznadziejne, ogólne pytanie, ale mimo wszystko jakieś pomysły? Obiekt „zdarzenie” przekazany do funkcji wykonywanej na dotyk:

{ 
     "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 
    } 

Teraz, to jest w kątową modalnego UI na płótnie, ale zdarzenia myszy działać prawidłowo. Oto mój żywioł 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'); 

Oto przykład jak wiążę:

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

Edycja, a tu jest mouseDown obiekt zdarzenia dla porównania:

{ 
    "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

Aby dostać Współrzędne x i y spróbuj użyć poniższego kodu:

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

Answer 2

Na przykład można powiązać zdarzenia dotykowe za pomocą dyrektyw, wewnątrz dyrektywa może mieć kod tak,

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

także mieć ostrożnym zachowaniu tych 4 typów zdarzeń dotykowych (touchstart, touchend, touchmove , touchcancel) w zależności od twoich celów. o wychwytywanie stanowisko wykorzystaniem kursora

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

Lepiej późno niż wcale (uwaga, to jest dla touchmove):

Kiedy przechodzi angularjs/jQuery, musimy patrzeć w originalEvent dla wszystkich szczegółów. Zauważ, że część [0] może wskazywać wiele równoczesnych dotknięć. Nie wiem, jak są zamawiane, ale touches[0] może być pierwszym palcem, a touches[1] może być drugim palcem. Powyższe rozwiązanie sprawdziło się, ponieważ oczekuję tylko użycia rysika.