Is there a method to generate TouchEvents or a similar functionality in Firefox?

Question

Is there a method to generate TouchEvents or a similar functionality in Firefox?

I am currently developing a browser extension that is able to generate simulated TouchEvents. My project is functional in Chrome, but I have encountered an issue with Firefox not supporting the TouchEvents feature. When attempting to create a new TouchEvent, Firefox displays the following error message:

ReferenceError: TouchEvent is not defined

I am exploring options to either implement TouchEvent within the extension or find an alternative method to dispatch an event with all the necessary properties similar to a TouchEvent.

Creating a CustomEvent and adding additional properties such as touches, targetTouches, and changedTouches to mimic a TouchEvent is proving to be ineffective, as these properties are not maintained once the event reaches the webpage.

Does anyone know of a solution to achieve my goal, or should I abandon hope of making this work on Firefox?

javascript firefox firefox-addon touch-event

Answer 1

Answer №1

After struggling to make the accepted solution work due to difficulties in constructing the necessary touches for the initDict, I finally found a workaround that suited my needs:

function dispatchTouchEvent(eventName, details) {
    const uiEvent = document.createEvent('UIEvent');
    uiEvent.initUIEvent(eventName, true, true, window, 1);
    const event = Object.assign(uiEvent, {touches: [details]});
    details.target.dispatchEvent(event);
}

Furthermore, here's an example of how to trigger it with a touchstart event on the body element at coordinates (50, 100):

dispatchTouchEvent('touchstart', {identifier: 0, target: document.body, pageX: 50, pageY: 100});

In my use case, only setting the pageX and pageY properties was necessary. However, depending on your specific requirements, you may need to also define clientX, clientY, screenX, or screenY.

Answer 2

After struggling to make the accepted solution work due to difficulties in constructing the necessary touches for the initDict, I finally found a workaround that suited my needs:

function dispatchTouchEvent(eventName, details) {
    const uiEvent = document.createEvent('UIEvent');
    uiEvent.initUIEvent(eventName, true, true, window, 1);
    const event = Object.assign(uiEvent, {touches: [details]});
    details.target.dispatchEvent(event);
}

Furthermore, here's an example of how to trigger it with a touchstart event on the body element at coordinates (50, 100):

dispatchTouchEvent('touchstart', {identifier: 0, target: document.body, pageX: 50, pageY: 100});

In my use case, only setting the pageX and pageY properties was necessary. However, depending on your specific requirements, you may need to also define clientX, clientY, screenX, or screenY.

Answer 3

Answer №2

For those facing a similar question, here is the solution I came across. You can develop your own custom class that extends UIEvent in the following manner:

class TouchEvent extends UIEvent {
    constructor(name, initDict) {
        super(name, initDict);
        this.touches = initDict.touches;
        this.targetTouches = initDict.targetTouches;
        this.changedTouches = initDict.changedTouches;
    }
}

It's worth noting that these events need to be created by a script running within the same domain as the handler that will handle them; otherwise, you may encounter a

Permission denied to access property

error. To address this issue, I utilized my extension's content script to inject a script element into the current document's body and assigned its textContent property to my JavaScript code responsible for generating and dispatching the touch events.

Answer 4

For those facing a similar question, here is the solution I came across. You can develop your own custom class that extends UIEvent in the following manner:

class TouchEvent extends UIEvent {
    constructor(name, initDict) {
        super(name, initDict);
        this.touches = initDict.touches;
        this.targetTouches = initDict.targetTouches;
        this.changedTouches = initDict.changedTouches;
    }
}

It's worth noting that these events need to be created by a script running within the same domain as the handler that will handle them; otherwise, you may encounter a

Permission denied to access property

error. To address this issue, I utilized my extension's content script to inject a script element into the current document's body and assigned its textContent property to my JavaScript code responsible for generating and dispatching the touch events.

Is there a method to generate TouchEvents or a similar functionality in Firefox?

Answer №1

Answer №2

Similar questions

Persist state in Vue by using the `vue-persistedstate` reducer

Tips for incorporating a live URL using Fetch

Modifying button appearance based on state change in AngularJS

Verifying the presence of an object in an array based on its value using TypeScript

Utilizing Angular Schema Form to Populate Form Fields with JSON Data

Converting a tree structure into JSON with the help of tree-model-js

Retrieve the chosen language while utilizing the $translate feature

Jquery Triggers Failing to Work Following Ajax Request

What is the best way to extract a specific section of JSON data using nodejs?

Having trouble muting the audio on my Vue audio player

Learn the process of encoding a string in JavaScript or jQuery and then decoding it with PHP

Learn how to stop the automatic scroll-to-top behavior on specific links within your React-Router application by implementing a custom ScrollToTop component

Extracting information from a child select element within a parent component with ReactJS

Ajax encountered an error while attempting to load the requested resource

How can you choose multiple options in a Select2 dropdown when it first loads?

How can you achieve a seamless or infinite scrolling effect on a webpage?

Effortless AJAX Submission and MySQL Data Refresh

Error encountered in 11ty: Invalid operation - eleventyConfig.addPassthroughCopy is not a recognized function

Updating switch data on click using Vuejs: A step-by-step guide

What is the best method for transferring the value of a useState variable between separate components in React?