Touch API (e.g. touchstart) not working in MS Edge - javascript

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.

Related

Why would my touchstart and touchend events not fire on Safari mobile?

Here is my app, running locally. My touchstart and touchend events fire correctly in the desktop Chrome mobile simulator, as well as on a friend's Android, but in Safari they do nothing. I have the viewport meta tag. It seems as though Safari is not registering as a mobile browser/device and, therefore, not registering touches.
Here is the file that I am working with the touch events. (It wouldn't format correctly here.)
(Swipe right to mark for deletion, swipe right again to confirm. Swipe left to mark complete.)

JQuery Mobile Swipe events on Windows Phone

I'm using JQuery Mobile for recognizing swipe events and it works well. Events fire on Windows Mobile (7.5 in my case), but what also fires is the web browser's default events for navigating the browsing history. Swiping right turns back a page. How can I prevent this default behavior?
I tried the preventDefault() and it didn't help here.
It will deactivate the touch:-
Add CSS snippets:
*{
touch-action: none;
}
But to reactivate the touch event only on the some zone, to allow the player to play or active the touch
To activate for certain places add this :-
#activetouch{
touch-action: chained;
}
Reference:https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Windows Phone 7/IE9 does not support mousemove event so there is not way for jquery mobile to recognize swipe event.
Some mobile frameworks like Apache Cordova (PhoneGap) provide workaround for this by adding special shim between native (silverlight) touch events and web browser control to fix missing mouse events. Demo
This works fine on Windows Phone 8 since it supports mousemove.

How to make sure touch events are enabled in Firefox desktop browser?

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.

Simulating touchstart and touchend events?

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.

Windows touch events in web page

I'm trying to figure out how to add event listeners for windows touch events (like a big touch screen monitor, not mobile) in Windows 7 and can't seem to make things like touchstart touchend etc. trigger in any browser. Do these events just not fire in a browser like they do on an iPad?
As far as I know, those events are included only in some mobile navigators (not all, see http://www.quirksmode.org/mobile/tableTouch.html ). I don't think you can handle them on a standard browser like ff/ie/chrome. You'll have to use mousedown & cie.
Take a look at the v2 branch of hammer.js http://eightmedia.github.com/hammer.js/v2/, it's a nice touch event abstraction layer for iOS, Android, BlackBerry and also includes support for Windows touch events.

Categories

Resources