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

JavaScript Regular Expression Assistance Domain Snatcher

I am in the process of developing a JavaScript Regex and I am struggling to find the right pattern to match a specific domain. Let me provide an example for better understanding. I need a regex that can identify any domain that exclusively contains (text. ...

javascriptregex

Is there a way to automatically recalculate the "Total Price" when the input values are adjusted?

Whenever I add an item to the cart, it gets appended to the row in the shopping cart, and the price adjusts accordingly. However, I'm having trouble getting the price to adjust whenever I change the input values (input type: "number"). I can't se ...

javascripthtmlcss

When using GTM dataLayer .push, a fresh object is generated rather than simply appending it to the current dataLayer

I am in the process of setting up a dataLayer for my website, but I have encountered an issue. My understanding is that Google Tag Manager dataLayer functions in a way where you have one central dataLayer object containing all the data variables. Each tim ...

javascriptangularjsdebugginggoogle-tag-managergoogle-datalayer

Headers cannot be set once they have already been sent in an express js application

After reviewing various responses to this query, I am baffled as to why this error keeps appearing despite having res.send() in multiple paths. In my code (expressjs 4.13), it looks something like this: var user ={ username: "some", password: "a" ...

javascriptnode.jsexpress

Executing actions on events in a Basic jQuery sliderLearn how to handle events and execute

I utilized the slider from the bjqs plugin at after reviewing the documentation, I noticed it only offers options and lacks events/functions. I am referring to events/functions like onSlideChange and onSlideDisplay. While other plugins such as bxslid ...

javascriptjquerybjqs

"When attempting to pass a string into the res.send() method in Node.js, undefined

As a new Node.js user, I'm attempting to send data back to the browser by utilizing a function called load_blocks() from an external file that I created, and then calling it with res.send(). I currently have two basic files in my setup: The first on ...

javascriptnode.jsexpressfs

Error: Attempting to insert or update the "tokens" table violates the foreign key constraint "tokens_userId_fkey" in Sequelize

I am facing an issue that I can't seem to resolve, as I keep encountering an error related to a constraint violation. The tables involved in this problem are Token and User, which are linked through the userId column. The error occurs when I try to cr ...

javascriptnode.jspostgresqlsequelize.js

Issue encountered: ENOENT - There is no file or directory located at the specified path for ... .steampath

I am encountering an issue while attempting to launch the development server on a React project that has been dormant for quite some time. After executing npm install and npm start, I encountered the following error message. Despite my efforts to manua ...

javascriptreactjsnpmvisual-studio-code

Sending a JSONP request to a PHP script

For my application submission, I am trying to send a JSON object to a PHP script that will return a JSON response. The challenge here is that the domain does not comply with the same-origin policy, meaning the JSON is being sent from a different domain. Up ...

javascriptphpjqueryjsonajax

designing a modular socket.io framework in node.js

Suppose in a node.js application, we have an app.js file structured like this: var express = require('express') var app = express(); var server = http.createServer(app); ... module.exports = { app:app, server:server } Additionally, there ...

javascriptnode.jsmodulesocket.ionpm

Preventing page reload by using event.preventDefault() does not work with Ajax Form

I've been working on a code snippet to submit a form using Ajax without any page reloads: $( document ).on('submit', '.login_form', function( event ){ event.preventDefault(); var $this = $(this); $.ajax({ data: ...

javascriptphpjqueryajaxforms

Importing an image from the public folder in a nested directory with Next.js

My images are stored in the public directory and all of my code is located in the src folder. Usually, when I try to import an image from src/page/page.js like: /image/logo/logo-dark.png, it works. But when I am importing images from the src/component/cor ...

javascriptreactjsnext.js

Is there a way to identify and remove empty spaces and carriage returns from an element using JavaScript or jQuery?

Is there a way to easily remove empty elements from the DOM by checking if they contain only whitespace characters or nothing at all? I am attempting to use $.trim() to trim whitespace in empty elements, but some are still returning a length greater than ...

javascriptjquerytrim

What's the best way to add a timestamp and class name to Angular's $log for an enhanced logging experience?

Is there a way to customize Angular logs by adding a timestamp and classname? For example: $log.info('this log entry came from FooBar'); "9:37:18 pm, FooBar: this log entry came from FooBar" I've come across various examples online that ...

javascriptangularjslogging

Tips for organizing a CodeIgniter application using AngularJS

I'm looking to develop an application that utilizes CodeIgniter for the backend and AngularJS for the frontend. Currently, I understand that we can use Angular JS $http service to retrieve data from Codeigniter. However, I'm unsure about how to ...

angularjscodeigniter

The functionality of the Bootstrap carousel may be compromised when initialized through JavaScript

Why isn't the Bootstrap carousel working in the example below? It starts working when I paste it into .content <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script sr ...

javascriptjquerytwitter-bootstrap

Using Angular routing without relying on a web server to load templates

Can templates be loaded in Angular without a web server? I came across an example here: https://groups.google.com/forum/#!topic/angular/LXzaAWqWEus but it seems to only print the template paths instead of their content. Is there a functioning example of t ...

javascriptangularjs

Ways to examine attributes assigned in the controller.$onInit function in AngularJS

In a certain scenario, I am initializing some variables in the controller's $onInit method. How can I verify that these properties are being set correctly? Controller ctrl.$onInit = function () { ctrl.devices = _.cloneDeep(ctrl.formDevices); }; ...

javascriptangularjsunit-testing

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

I'm currently facing some difficulties connecting to a brewery API (). I am developing a webpage where users can input the city they are visiting and receive a list of breweries in that city. As someone unfamiliar with APIs, I am unsure about the nece ...

javascriptapi

How to maintain the selected value in a Vue.js dropdown even after the page is refreshed

When a user selects a value from a dropdown, it is pushed to the URL. If the page is refreshed, the dropdown should default to the selected value in the URL. This functionality is being implemented in Laravel. I have attempted the following approach, but w ...

javascriptlaravelvue.jsvuejs3