Touch-Ereignis nicht zurück Touch-Daten

Question

Edit: "Dies kann nicht in Angular UI Modals getan werden" ist eine gültige Antwort, wenn das tatsächlich der Fall ist.

Dies sind die Rückgabedaten, die ich von einem Berührungsereignis erhalte. Auffallend fehlen die sinnvollen Touch X/Y-Coords (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). Dies ist eine hoffnungslos allgemeine Frage, aber nichtsdestoweniger irgendwelche Ideen? Das „Ereignis“ Objekt an die Funktion auf Touch ausgeführt geben:

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

Nun, dies ist in einem Winkel UI Modal in Leinwand, aber Mausereignisse funktionieren. Hier ist mein Element 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'); 

Hier ist ein Beispiel dafür, wie binde ich:

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

Bearbeiten, und hier ist ein mousedown- Ereignisobjekt zum Vergleich:

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

Um x und y-Koordinaten versuchen, unter dem folgenden Code zu verwenden

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

Answer 2

Zum Beispiel können Sie die Berührungsereignisse mit Richtlinien binden, innerhalb der Richtlinie einen Code wie diese haben könnte,

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

auch vorsichtig über das Verhalten der vier Arten von Touch-Ereignissen (Berührungsstart, touchend, Berührungsbewegungs haben müssen , touchcancel) abhängig von Ihren Zielen. für die Erfassung der Position des Cursors verwenden, (ist zur Kenntnis, das für touchmove)

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

besser spät als nie:

Wenn man sich durch AngularJS/jQuery, müssen wir in die aussehen originalEvent für alle Details. Beachten Sie, dass der Teil [0] mehrere gleichzeitige Berührungen anzeigen kann. Ich weiß nicht, wie sie bestellt sind, aber touches[0] könnte erster Finger sein und touches[1] könnte zweiter Finger sein. Die obige Lösung funktionierte für mich, weil ich nur erwarte, dass der Benutzer einen Stift verwendet.