Skip to main content
Inspiring
October 24, 2018
Question

Touch events API Chrome 70 now disabled in default settings.

  • October 24, 2018
  • 1 reply
  • 2898 views

Hi,
the last Chrome update has blocked touch events on canvas, such as moving with objects. You need now manually(!!) enter into chrome://flags and enabled Touch events API. The same problem is with Edge, here is it necessary set in about:flags.
When I display HTML5 canvas scene in a browser, it is not possible to move with the finger on the touch screen with the object "obj".
Is there some way to solve it in Adobe Animate code?

Here is my code:
//
_this=this
var offset;

function setobject(evt)

{
var p1 = _this.globalToLocal(evt.stageX, evt.stageY);
this.offset = {x: evt.currentTarget.x - p1.x,y: evt.currentTarget.y - p1.y};

}

function moveobject(evt)

{
var p = _this.globalToLocal(evt.stageX, evt.stageY);

evt.currentTarget.x = p.x + this.offset.x;
evt.currentTarget.y = p.y + this.offset.y;


}

this.obj.addEventListener("mousedown", setobject)

this.obj.addEventListener("pressmove", moveobject)
//

When I set for example "touch-action: none" in CSS, it seems to help but it does not work with a multi-touch.

Is there any solution?

Thank you!

This topic has been closed for replies.

1 reply

Braniac
October 24, 2018

Apparently they're only disabled on desktop versions of Chrome:

The ontouch* APIs default to disabled on desktop - Chrome Platform Status

Why would you be using touch events on the desktop? You should be using mouse events for desktop interaction.

Supporting both TouchEvent and MouseEvent - Web APIs | MDN

Inspiring
October 24, 2018

Because I'm creating a program for kids on the touch screen with Windows. I need to put the figure in the example with a touch and not with mouse.

http://www.hrajeme-si.cz/iskolicka/hrajemesi/ukazka/sample1.html

Braniac
October 24, 2018

Unless you're doing multi-touch interactions, you should be fine just using the mouse events. All touch screen drivers automatically simulate mouse events.