I used a simple test on a windows 7 desktop with touch capabilities.
For simplicity it was 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)
In chrome, the 'touchstart' was confirmed.
In IE, the 'pointerdown' was confirmed.
In Firefox, the 'mousedown' was confirmed.
After troubleshooting, I ultimately had to go to 'about:config' in Firefox and
change the 'dom.w3c_touch_events.enabled' value from 0 to 1. This caused the 'touchstart' to be confirmed in Firefox.
My questions are these:
Shouldn't this have already been enabled on a touch-capable machine?
IE and Chrome were configured properly and Firefox was not. (This was a brand new download of Firefox 31).
Is there anyway to enable touch events remotely in a case like this so that Firefox behaves similarly to the other browsers?
Thanks
In order to enable touch events in the desktop version of Firefox, type "about:config" into the address bar of the browser, click the "I'll be careful, I promise!" button and scroll down until you find "dom.w3c_touch_events.enabled" ....when you click this item, a dialog box will appear that allows you to change the value of the setting.
disable=(0) enable=(1) auto-detect=(2)
This should be set to "auto-detect" by default, but currently, the desktop version of Firefox is set to "disable" due to some bugginess.
Info 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; by default, they're on auto-detect(2). After changing the preference, you must restart the browser for the changes to take effect.
Note: As of Gecko 24.0, the touch events support introduced with Gecko 18.0 has been disabled on the desktop version of Firefox, as some popular sites including Google and Twitter are not working properly. Once the bug is fixed, the API will be enabled again.
The mobile versions including Firefox for Android and Firefox OS are not affected by this change. Also, the API has been enabled on the Metro-style version of Firefox for Windows 8.
Touch events are not working in Firefox currently (version 48.0.1) but it is possible to enable pointer events by browsing to about:config and setting dom.w3c_pointer_events.enabled to true. The event object passed to your handler will contain a pointerType property with the value of "touch" if it was a touch event.
See: https://mobiforge.com/design-development/html5-pointer-events-api-combining-touch-mouse-and-pen
There is a dom.w3c_touch_events.legacy_apis.enabled events configuration option in Firefox 72. It is off by default. Turning it on helps some websites with touch-based drag and drop. Atlassian Jira in particular.
Related
I have implemented reading the touch force for haptic touchscreen as per https://developer.mozilla.org/en-US/docs/Web/API/Touch/force
If I test in chrome debug tools on a PC (set to mobile) then it will register the force as 1 (as far as I can tell there's no way to simulate a different pressure). So I know the code it correct.
However on my iPhone XR which does have a haptic screen it always registers as 0.
The compatibility table says Safari on iOS support it, and I haven't been able to find anything that says you need to request the user permission for the feature (like you would with device orientation).
Any ideas why it isn't working?
on caniuse you have more details on support for iOs Safari, please check your safari iOs version is >= 14.5.
So i developed a web app and i used onauxclick on a functionality. When i went to test it on firefox browser it all went perfectly. I tested it with google chrome browser and the onauxclick event handler wasn't working when pressing down the mouse wheel. After few more testing i was able to make it work by selecting the text and pressing the right mouse button (without leaving the selected text). So i was wondering, how does it work differently on google chrome browser and windows 10?
While the different browser vendors try to stay as close as possible to the W3C standards when implement HTML and JavaScript features, they do tend to sometimes introduce minor differences between implementations or even not implement some stuff at all.
The feature you are trying to use is at the moment experimental and not supported on Safari and Safari iOS. Expect it to change a bit until it is finalised and released.
More details here:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick
I am making use of an external JavaScript library qTip. My application has a feature of 'StarRating' and 'Comments', which is provided through this plugin.
After providing a rating through the stars, one can enter the Comments(optional), which opens up in a dialog.
This scenario works well across all the major browsers i.e. Chrome FF and IE but not in IE (touch devices) and Edge browser (touch devices). As soon as the stars are clicked and on focus inside the input box, the dialog box disappears in the touch devices with IE and Edge only, but works well in Chrome and FF (touch enabled).
I don't know whether there is an issue with the library or with the touch events.
Microsoft Edge doesn't support touch events by default. It has an alternative system called pointer events. Sometimes 3rd party libs implement touch based widgets that don't play well with pointers. A quick way to determine if this is the case is to switch on touch events inside of Edge. Put about:flags in the address bar then go to the setting enable touch event and change it to always.
If the site now works, then I suspect it's an issue with the library. If that is the issue then I'd raise the issue with qTip they can probably help identify the issue specifically so that it can be fixed in the library.
my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.
for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown
Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill
Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.
I'm developing a jquery component which works primarily for ipad. So is there anyway to simulate 'touchstart and 'touchend' events in desktop rather than having the device itself to check the events.
You can author your own custom events within jQuery:
var event = $.Event( "touchstart", { pageX:200, pageY:200 } );
And you can issue them against any element in the DOM:
$("body").trigger( event );
Demo: http://jsbin.com/ezoxed/edit#javascript,html
Further reading: http://api.jquery.com/category/events/event-object/
Keep in mind that there are various other types of interfaces on the market now that don't support touchstart and touchend events. For instance, Windows 8 is already occupying tablets in the mobile market, and it uses a more abstracted event model consisting of Pointers.
Chrome Dev-tools within a Chrome Browser allows you to emulate touch events. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.
From the docs...
Emulating Touch Events
Touch is an input method that's difficult to test on the desktop,
since most desktops don't have touch input. Having to test on mobile
can lengthen your development cycle, since every change you make needs
to be pushed out to a server and then loaded on the device.
A solution to this problem is to simulate touch events on your
development machine. For single-touches, the Chrome DevTools supports
single touch event emulation to make it easier to debug mobile
applications on the desktop.
To use from a Chrome browser (as of version 29.0.1547.65):
Select the Chrome menu at the top-right of your browser window (three stacked lines).
Select Tools > Developer tools. (Shortcut Shift+Control+I)
A tools window will appear on the bottom with the tab Console selected.
In the bottom right click on the settings cog (look like a gear).
A setting panel will appear with "General" on top.
Click "Overrides" on left to select overrides panel.
Scroll down and check "Enable touch events"
Reload your page
You mouse will now appear as a fuzzy circle. Click to "touch".
As of 2018, Chrome DevTools supports device emulation outright, without any need for override setting. Just toggle the device toolbar (Ctrl + Shift + M) to get the browser into mobile mode, then touch events can be triggered by the mouse.