Steps to simulate a TouchEvent programmatically using TypeScript

Question

Steps to simulate a TouchEvent programmatically using TypeScript

Is there a way to manually trigger the touch event in TypeScript? In JavaScript, it was possible but I am struggling to achieve the same in TypeScript.

For example:

 let touchStart: TouchEvent = document.createEvent('TouchEvent');
 touchStart.initEvent('touchstart', true, true);
 element.dispatchEvent(touchStart);

While I can trigger the touchStart event, I am unable to retrieve values for changedTouches[0].pageX and changedTouches[0].pageY.

I have attempted solutions suggested in this link, such as:

 touchStart.changedTouches = [
    pageX: x
    pageY: y
  ]

However, assigning values to changedTouches fails due to its readonly property. How can I work around this issue and successfully utilize changedTouches in TypeScript?

javascript typescript jasmine karma-jasmine

Answer 1

Answer №1

This bug in TypeScript's lib.d.ts is causing issues with defining the types of JavaScript and DOM elements.

To address this, I have filed a ticket as well as a pull request for a possible fix.

If these changes are approved, users can anticipate that the standard use of

new TouchEvent(eventType, initArguments);

will function properly in upcoming TypeScript versions.

For guidance on how to handle event creation correctly in JavaScript, refer to this MDN tutorial.

Answer 2

This bug in TypeScript's lib.d.ts is causing issues with defining the types of JavaScript and DOM elements.

To address this, I have filed a ticket as well as a pull request for a possible fix.

If these changes are approved, users can anticipate that the standard use of

new TouchEvent(eventType, initArguments);

will function properly in upcoming TypeScript versions.

For guidance on how to handle event creation correctly in JavaScript, refer to this MDN tutorial.

Answer 3

Answer №2

Recently, I've been experimenting with simulating touch events in TypeScript and encountered similar challenges. After examining how the Angular Material team tackled this issue in their tests, I decided to adopt a similar strategy. Here is a snippet showcasing the code I'm using to replicate TouchEvents featuring touchstart along with a mocked array of changedTouches:

let simulatedEvent = createTouchEvent(htmlElement, 'touchstart');
htmlElement.dispatchEvent(simulatedEvent);

function createTouchEvent(targetElement: HTMLElement, eventType: string) {        
    const event = document.createEvent('UIEvent');    
    event.initUIEvent(eventType, true, true, window, 0);

    let touches = [{target: targetElement}];

    Object.defineProperties(event, {
      changedTouches: {value: touches}
    });    
    return event;
}

Within my components, I handle these events by listening for them as shown below:

 this.touchStartListener = this.renderer.listen('document', 'touchstart', (event: TouchEvent) => {
                    this.handleTouchStart(event);
                });

This implementation functions seamlessly without any TypeScript warnings, ensuring that the events are effectively triggered and managed during testing.

Answer 4

Recently, I've been experimenting with simulating touch events in TypeScript and encountered similar challenges. After examining how the Angular Material team tackled this issue in their tests, I decided to adopt a similar strategy. Here is a snippet showcasing the code I'm using to replicate TouchEvents featuring touchstart along with a mocked array of changedTouches:

let simulatedEvent = createTouchEvent(htmlElement, 'touchstart');
htmlElement.dispatchEvent(simulatedEvent);

function createTouchEvent(targetElement: HTMLElement, eventType: string) {        
    const event = document.createEvent('UIEvent');    
    event.initUIEvent(eventType, true, true, window, 0);

    let touches = [{target: targetElement}];

    Object.defineProperties(event, {
      changedTouches: {value: touches}
    });    
    return event;
}

Within my components, I handle these events by listening for them as shown below:

 this.touchStartListener = this.renderer.listen('document', 'touchstart', (event: TouchEvent) => {
                    this.handleTouchStart(event);
                });

This implementation functions seamlessly without any TypeScript warnings, ensuring that the events are effectively triggered and managed during testing.

Steps to simulate a TouchEvent programmatically using TypeScript

Answer №1

Answer №2

Similar questions

Guide to shutting down a print dialogue in a web browser with javascript

"Unlock the power of Meteor: dynamically serve up the specific range of items

A guide to performing a LEFT JOIN on two JSON data sources from external URLs

Leveraging Node.js to establish a connection between two pug files

Dealing with errors in a sequelize ORM query: Tips and tricks

InvalidSyntaxError: Client login cannot be completed due to an unexpected end of input. Please

Automatically generated error notifications for Express-Validator

Determine the amount of clicks and retrieve the URL of the clicked link in Selenium using Python

Showing the initials of a user at the top of an SVG using ReactJS

Incorporate a dropdown menu based on the selection made in another dropdown menu

When utilizing React, I generated an HTML page with a distinct .js file, however, encountered two unexpected errors

What is the reason for requiring both a promise and a callback in order to store JSON data in a global variable?

JavaScript error: forEach is not a function

Displaying inner arrays in an Angular2 MatTable

JavaScript Array Multiplication Theory

Having trouble accessing a custom factory within a directive in Angular using TypeScript

Can a component be passed as props and utilized within a child Component in Vue.js?

Arrays in Javascript (correlating)

Validation in AngularJS is limited to only accepting integers with the use of the

Adding data to the SharePoint RichText Control using the WinForms WebBrowser Control