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

Question

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.

Solution 1

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

Solution 2

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

Comments

[dude]

Yes but the touchstart event is even not getting fired if I have no keyboard connected. Also I would like to keep this event just for touch devices and not for desktop devices (what would be the case with Pointer API).

[Shanoor]

Is it a bluetooth keyboard? Having one paired seems to be enough to not trigger the event, it's quite stupid.

[dude]

I have an ASUS Tablet that comes with a docking station. The docking station includes a keyboard. So if I disconnect it from the dockingstation I expect it to the a "native" touch-tablet that should be detected as such.

[dude]

You will disable touch actions with this CSS. As I already mentioned touch events are supported, refer caniuse.com/#search=touch. And I don't want to support mouse events and this would be the fact with Pointer API. I have described this too.

[t.ouvre]

@julmot, it's wrong. ms-touch-action to none is required to enable custom gesture handling. Without that, your browser use a default behavior (for scrolling handling, panning, pinch & zoom). If you want build custom gesture (and use Pointer API), you have to set ms-touch-action to none. For the last version of Edge, "-ms-touch-action" must be replaced by "touch-action". Just trust me and try to use PointerMove event on the body of a page with touch-action to none and nothing. You will see wath I mean.

[t.ouvre]

@julmot, for touch API, you have to activate a flag on Edge : in the url input, enter about:flags. In the section Touch, you can enable touch events with the corresponding dropdown.

[dude]

I'll check this out in new year.

[dude]

In fact this property was disabled. I don't know the reason why it was disabled, but after activating it, touch events are getting fired correctly. Maybe a Windows 10 upgrade issue...

[dude]

Thanks for this hint!

[thab]

FYI - I needed to do this AND add the style tag: -ms-touch-action: none; mentioned your other answer

[trismi]

Is this solution helpful for the WWW in general? Most users aren't going to have this flag enabled, or care / know about enabling it.

[ygoe]

@trismi Features that aren't enabled by default don't exist. No user will configure their browser's hidden features. They just say it doesn't work. Then I just have to say, get a real browser. Edge is the new IE?! There was hope.

[ygoe]

The pointer events are not working, too. So Edge simply has nothing to offer on touch devices. All the advertisement was wrong.