Ensuring that touch events are activated on Firefox's desktop browser

Testing on a Windows 7 desktop with touch capabilities, I performed a simple test that looked something like this:

temp_div.addEventListener('touchstart', function(e){ /*confirm */ }, false)
temp_div.addEventListener('pointerdown', function(e){ /*confirm */ }, false)
temp_div.addEventListener('mousedown', function(e){ /*confirm */ }, false)

Interestingly, in Chrome, the 'touchstart' event was confirmed, while in IE, it was the 'pointerdown' event, and in Firefox, it was the 'mousedown' event.

After some investigation, I found that I needed to go into 'about:config' in Firefox and change the 'dom.w3c_touch_events.enabled' value from 0 to 1 in order for the 'touchstart' event to work properly in Firefox.

These results raised some questions for me:

Shouldn't touch events already be enabled on a touch-capable machine? IE and Chrome seemed to be configured correctly while Firefox was not (mind you, this was a fresh download of Firefox 31).

Is there a way to remotely enable touch events in a situation like this so that Firefox behaves more similarly to the other browsers?

Thank you!

Answer №1

If you want to activate touch events on the desktop version of Firefox, simply enter "about:config" in the browser's address bar, click on the "I'll be careful, I promise!" button, and scroll down until you locate "dom.w3c_touch_events.enabled"....once you click on this item, a dialog box will pop up allowing you to modify the value of the setting.

Disable=(0) Enable=(1) Auto-detect=(2)

By default, this setting should be set to "auto-detect", but currently, the desktop version of Firefox is set to "disable" due to some technical issues.

More information about this setting can be found here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Touch_events

Excerpt:

The dom.w3c_touch_events.enabled tri-state preference can be used to disable (0), enable (1), and auto-detect (2) support for standard touch events; typically, they are set to auto-detect (2) by default. After adjusting the preference, you need to restart the browser for the changes to take effect.

Please note: Starting from Gecko 24.0, the touch events support introduced in Gecko 18.0 has been deactivated on the desktop version of Firefox, as some popular websites such as Google and Twitter are experiencing issues. Once the problem is resolved, the API will be reactivated.
This change does not affect mobile versions like Firefox for Android and Firefox OS. Additionally, the API remains enabled in the Metro-style version of Firefox for Windows 8.

Answer №2

In the current version of Firefox (48.0.1), touch events may not be functioning properly. However, a workaround is available to enable pointer events by accessing the about:config page and setting the dom.w3c_pointer_events.enabled option to true. The event object passed to your handler will include a pointerType property with the value of "touch" in case of a touch event.

For more information, visit:

Answer №3

Firefox 72 includes a configuration option called

dom.w3c_touch_events.legacy_apis.enabled
that is initially disabled. Enabling this option can provide improved functionality for touch-based drag and drop on certain websites, such as Atlassian Jira.

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

Is there a way to check if a file name input is valid using regular expressions?

I'm having trouble getting my code below to work properly. I'm not sure if the problem lies in the match function syntax or the regex itself. Any assistance would be greatly appreciated. $scope.fileSelected = function (file) { var valid = "/ ...

"Encountering a Syntax Error When Using request.post in Dojo Framework on Button Click

Here are three questions to consider: 1) What strategies can be utilized to streamline this code and reduce nesting and quote-related complications? 2) Are there any suggestions for addressing the parsing error mentioned below? I've already tested sep ...

Transclusion with multiple slots in AngularJS

Attempting to incorporate a component in AngularJS 1.5.8 with multi-slot transclusion. The test performs well when utilizing a directive, however, with a component, it appears that the slot cannot be located!. This is how the component is declared app. ...

When refreshing the React page, it appears blank

Encountering a issue with one of the pages on my react website. Whenever I attempt to reload the Home.js page by refreshing the browser, it displays blank. However, when using the back navigation button in the browser, it functions correctly. I've che ...

Encountering null values in IE8/IE7 JavaScript code

Although I am not a JavaScript expert, I have a simple function that works perfectly in all browsers except for IE8 and 7. function setSelected() { var backgroundPos = $('div.eventJumpToContainer').find('.selected').css('backg ...

Is it possible to execute a URL twice instead of just once in AngularJS?

While developing a web application with AngularJS and Rest Web services, I encountered a problem where the URL is being executed twice instead of just once. I have created a service function for executing the web service API and calling it from the control ...

Encounter a snag while using Chrome to access an external API through jQuery

I am currently utilizing jQuery to make a request to an external API via AJAX. $.ajax({ url: https://exampleAPI, method: "GET", contentType: "text/plain", dataType: "jso ...

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below: <img :s ...

Run some code and then enter interactive mode

Is there a method to run certain code (from a file or a string) before entering interactive mode in node.js? For instance, if I have script called __preamble__.js with the following content: console.log("preamble executed! poor guy!"); and a user enters ...

Is it possible to modify variables in the controller when the route is changed?

My application utilizes a template and several views that are dynamically rendered based on their route: popApp.controller('HomeCtrl', ['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) { ...

Interactive tooltip with hyperlinks powered by jQuery

Is it possible to create a pop-up window with links that behave like a normal tooltip but can be clicked on by the mouse? How can this functionality be achieved without losing focus when hovering over the links causing the window to close? jQuery(docume ...

Javascript's second element does not trigger a click event with similar behavior

I'm currently facing an issue with displaying and hiding notification elements based on user interaction. My goal is to have multiple popup elements appear when the page loads. Then, when a user clicks the ".alert-close" element within one of the popu ...

Tips for assigning a standard or custom value using JavaScript

What is the best way to automatically assign a value of 0 to my input field when the user leaves it blank? Should I use an if statement { } else { } ...

Find out whether the page was reloaded or accessed directly through a hyperlink

I need to find out if the page was accessed directly via a link. If it was, I need to perform a certain action. However, my current implementation is not working as intended, as even a page refresh triggers this action. Is there an alternative method to ch ...

What are the distinctions between manually and programmatically changing URLs in Angular 6?

My query pertains to differentiating navigation methods, specifically between clicking a button with [routerLink] and manually entering a URL in the browser's search bar. Update: I have a fixed menu on a certain page that appears as follows: <ul& ...

Obtaining an XML element within an XSLT transformation

I need to retrieve the value of an XML element within XSL. Although my JavaScript is able to select one XML document, there are elements in other documents that I also require. I am uncertain if this task is feasible or if my syntax is incorrect. This is ...

JS setTimeout not postponing execution

Attempting to introduce a delay before an AJAX call. var delay = 2000; $("#c_name").on("keyup", function() { var entered = $(this).val(); if (entered.length > 1) { setTimeout(dosearch(entered), delay) } }); Struggling to implement a d ...

NextJS not maintaining state for current user in Firebase

I'm working on an app utilizing firebase and nextjs. I've set up a login page, but when I try to retrieve the current user, it returns undefined. This issue began a few days ago while working in react native as well - initially, it was related to ...

updating the row of an html table with elements from a javascript object

I am faced with the task of dynamically adding rows to a table based on the number of elements in my JavaScript object. The object consists of keys and arrays of values. userobject={ ID: [1,2,3] IP_Address: ["12.21.12 ...

Utilizing Angular: Filtering Views Based on JSON Data Values

I am struggling to figure out why a basic Angular filter is not working for me in this example. Despite following the recommended format I found online, it does not seem to be functioning properly. Essentially, I just need to display information from the a ...