Exploring the Touch Feature in Angular

I am facing an issue with touch events as I am not receiving any useful X/Y coordinates. The event object does not provide the necessary information I need for touch events (https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches). Despite this being a generic question, I'm open to any ideas on how to resolve this. Here is the structure of 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
    }

Currently, these issues are occurring within an angular UI modal in canvas, while mouse events seem to be functioning properly. Below is the element I'm working with:

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 how I bind the touch event:

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

For comparison, here is the event object for a mousedown event:

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

Answer №1

It appears that you are utilizing jQuery, or at least a similar implementation of it. When working with touch events, keep in mind that jQuery may not capture all the properties and attributes associated with them. However, you can access these details by referencing the originalEvent object.

Within the originalEvent property lies the actual touch event data, which you can manipulate as required by the specifications.

For instance, consider the following code snippet:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using JSON.stringify on a map object, it returns an empty result

var map1= new Map(); map1.set("one",1); var map2 = new Map(); map2.set("two",2); concatMap = {}; concatMap['one']= map1; concatMap['two']= map2; JSON.stringify(concatMap); //outputs : "{"one":{},"two":{}}" I als ...

javascriptjson

Transforming Unicode escape sequences into symbols and displaying them in a DOM element

Using the latest versions of Firefox and Chrome with jQuery 1.x edge. When an ajax request returns a single line of minified JSON text like this: { "fromSymbol": "\\u04b0", "toCurrency": "AUD", "toSymbol": "\\u0024", "convFact ...

javascriptjqueryajaxunicodeescaping

Can you create reusable components in Wordpress that are encapsulated?

In my quest to explore innovative approaches to Wordpress theme development, I have stumbled upon a variety of options such as the "Roots Sage" starter theme, the "Themosis Framework," and "Flynt." While these solutions address intriguing problems, they do ...

javascriptphpwordpresssasscomponents

Use CredentialsProvider to enable Next Auth login functionality

I am encountering an issue where I retrieve a user from the database and store it in a variable called result. However, I noticed that the result object does not contain the password key, resulting in the value of result.password being undefined. I am un ...

javascriptmongoosenext.jsnext-auth

Position a center pivot amidst a collection of 3D shapes within ThreeJS

I am currently working on creating a plugin prototype to allow customization of 3D objects using ThreeJS. You can view my progress so far here: If you've visited the link, you may have noticed that when hovering over the left or right arrow, the obje ...

javascriptthree.js

Add unique styles to a jQuery-included HTML document

I'm attempting to use jQuery to load an HTML page into the main body of another page. Specifically, I have a div called sidebar_menu positioned in the middle of the page, and I am loading content at the bottom using jQuery. $("#sidebar_menu").load(" ...

javascriptjquery

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

javascript

Protractor's browser.wait function is not functioning properly when conducting tests on a non-AngularJS website

I am currently working on testing a non-angular JS website using Protractor. Even though my test case passes successfully, I am looking to eliminate the sleep statement and replace it with either a wait or Expected condition in my test case. Here is a sni ...

javascriptangularjsprotractor

The pattern() and onkeyup() functions are unable to function simultaneously

When trying to display a certain password pattern using regex while typing in the fields, I encountered a problem. The onkeyup() function works for checking if both passwords match, but it causes the pattern info box not to appear anymore. I'm curiou ...

javascripthtmlcssregex

The transclude directive is ineffective in altering the content

While working on my AngularJS 1.3 project, I encountered an issue with a transclude directive that I had defined. Despite seeing that the directive was being invoked in the link phase, it seemed to have no effect on the rendering of the page. Here is a sn ...

angularjsangularjs-directive

Strangely peculiar glitch found in browsers built on the Chromium platform

During a school assignment, I'm attempting to adjust the width of a button using Javascript. Below is my code: const button = document.querySelector("button"); button.addEventListener("click", () => { console.log(button.offsetWidth); butto ...

javascripthtmlgoogle-chromemicrosoft-edgechromium

Is it possible to link fields with varying titles in NestJS?

Currently, I am developing a NestJS application that interacts with SAP (among other external applications). Unfortunately, SAP has very specific field name requirements. In some instances, I need to send over 70 fields with names that adhere to SAP's ...

javascriptnode.jstypescriptnestjs

What is the best way to access a custom object in JavaScript that was created in a different function?

Currently working with JavaScript and jQuery technology. In one of my functions that runs on document ready, I am creating objects with different attributes. While I can easily access these object attributes within the same function, I'm facing diff ...

javascriptjquery

Can you explain the distinction between these two forms of functional components in ReactJs?

What sets apart these two code usages? In the FirstExample, focus is lost with every input change (It appears that each change triggers a rerender).. The SecondExample maintains focus and functions as intended. example import React, { useState } from &quo ...

javascriptreactjsreact-functional-component

Creating a unique array of non-repeating numbers in ES6:

Looking to create an array of unique random numbers in ES6 without any repeats. Currently, my function is generating an array of random numbers that are repeating: winArray = [...Array(6)].map(() => Math.floor(Math.random() * 53)); Here is a non-ES6 ...

javascript

When using $resource.save, it returns a "Resource" instead of just an ID

For some reason, I am struggling with a seemingly simple task and cannot find a solution by going through documentation or other Angular related questions on SO. I may not be the brightest, so I could really use some help here as I am feeling stuck. Take ...

javascriptangularjsspring-mvcpostcallback

Checking the URL in Redux Form

I am currently using the redux-form library to manage my form in React Redux. I have successfully implemented validation for fields like email and name. However, I am facing an issue with validating a URL field in redux-form. What specific format should I ...

javascriptformsreactjsreduxredux-form

Utilizing hidden types for radio button validation in AngularJS: A step-by-step guide

<input type="hidden" value="{{r.radioname}}" name="{{field.Name}}" ng-model="inputfield[field.Name][r.radioname]" required> <input type="radio" id="radio_{{$index}}" value="{{r.radioname}}" name="{{field.Name}}" ...

angularjs

Implementing restify on a website that mandates user login authentication

Currently, I am operating a REST API server using restify. In addition, my front-end consists of angularjs with html, css, and js files hosted on an Apache webserver. The next step is to implement user login authentication for this webapp. Access to the w ...

javascriptnode.jsauthenticationexpressrestify

Getting the location of a mouse click and adding tags (marks) on an image: a simple guide

Is there a way to incorporate images with tagged marks similar to Facebook's image tagging feature? How can I retrieve the X and Y coordinates of tags on the image itself (not the screen) and display them in a responsive manner? ...

javascriptjqueryhtmlcss