CODEWITHSUNDEEP
javascriptangularjscanvastouch
VSO
VSO

Reputation: 12646

Touch in Angular

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
}

Upvotes: 1

Views: 949

Answers (1)

Alexander O'Mara
Alexander O'Mara

Reputation: 60527

It looks like you are using jQuery, or at least a jQuery-like implementation. jQuery does not copy all the touch event properties to the normalized event wrapper. You can however find them under the originalEvent object though.

The originalEvent property contains the native touch event, which you can use according to the specification.

For example, code like this:

$('body').on('touchmove', function(e) {
    // Access the original event like this:
    console.log(e.originalEvent);
});

Upvotes: 2

Related Questions