Edit: "This can't be done in Angular UI Modals" is a valid answer, if that's actually the case.
This is the return data I get from a touch event. Conspicuously missing are any useful touch X/Y coords (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). This is a hopelessly generic question, but nonetheless, any ideas? The "event" object passed to the function executed on touch:
{
"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
}
Now, this IS in an angular UI modal in canvas, but mouse events work fine. Here is my 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');
Here is an example of how I bind:
element.bind('touchstart', scope.touchStart);
Edit, and here is a mousedown event object for comparison:
{
"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
}
For example you can bind the touch events using directives, inside the directive could have a code like this,
element.on('touchstart', function (event) {
event = event.originalEvent || event;
//actions
event.stopPropagation(); //if you need stop the propagation of the event
});
also need to have careful about the behavior of the 4 types of touch events (touchstart, touchend, touchmove, touchcancel) depending on your goals. For capture the position of the cursor use,
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();
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With