[Bug] Chrome 70 touch no longer triggers mousedown, pressmove, pressup

[masandoval]

Issue Details

• Version used: 1.0.2

• Pointer events using touch in Chrome no longer trigger DisplayObject mousedown, pressmove, or pressup events, except when performing a click (i.e. single tap), which triggers mousedown and pressup on release.

• This also happens on the Mouse Interaction tutorial page: https://www.createjs.com/tutorials/Mouse%20Interaction/

  • See the Stage Mouse Events and Drag and Drop examples.

• OS and browser: Chrome 70.0.3538.76 on Chromebook and Windows Surface.

• Do you know of any workarounds?

  • Reverting to Chrome 69 "fixes" the issue.

[masandoval]

Adding

			ls["pointerup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };
			ls["pointermove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };
			ls["pointerdown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };

to enableDOMEvents seems to help, if not solve the issue. Still investigating.

[amihanya]

+1

@masandoval were to add that code?

[amihanya]

Dan Zen from zim add that: https://zimjs.com/explore/drag2.html
that better becuse the drag work. but the mousemove lose after one move and dont stay.
please help 👍

[danzen]

Yes - I added the three lines below in the enableDOMElements of Stage. Ami reported a slight improvement but the pressmove in the https://zimjs.com/explore/drag2.html example only runs a couple of times then stops running - no error in the console.
ls["mouseup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };
ls["mousemove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };
ls["dblclick"] = {t:this.canvas, f:function(e) { _this._handleDoubleClick(e)} };
ls["mousedown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };
// masandoval from #997
ls["pointerup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };
ls["pointermove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };
ls["pointerdown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };

[masandoval]

By using pointer events instead of mouse events I was able to restore functionality in the app I'm working on, but Firefox slows down considerably when using the pointer events (even when mouse events are not added). Currently I'm using userAgent to determine if the Chrome version is 70+ to apply the changed event types, and using what already works (mouse events) in all other cases. Definitely not an ideal solution.

p.enableDOMEvents = function(enable) {
		if (enable == null) { enable = true; }
		var n, o, ls = this._eventListeners;
		if (!enable && ls) {
			for (n in ls) {
				o = ls[n];
				o.t.removeEventListener(n, o.f, false);
			}
			this._eventListeners = null;
		} else if (enable && !ls && this.canvas) {
			var t = window.addEventListener ? window : document;
			var _this = this;
			ls = this._eventListeners = {};

			var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
			var usePointerEvents = (raw ? parseInt(raw[2], 10) : false) >= 70;
			if (usePointerEvents) {
				ls["pointerup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };
				ls["pointermove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };
				ls["dblclick"] = {t:this.canvas, f:function(e) { _this._handleDoubleClick(e)} };
				ls["pointerdown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };
			} else {
				ls["mouseup"] = {t:t, f:function(e) { _this._handleMouseUp(e)} };
				ls["mousemove"] = {t:t, f:function(e) { _this._handleMouseMove(e)} };
				ls["dblclick"] = {t:this.canvas, f:function(e) { _this._handleDoubleClick(e)} };
				ls["mousedown"] = {t:this.canvas, f:function(e) { _this._handleMouseDown(e)} };
			}

			for (n in ls) {
				o = ls[n];
				o.t.addEventListener(n, o.f, false);
			}
		}
	};

[masandoval]

Changing chrome://flags/#touch-events to "Automatic" from "Disabled" restores functionality.
Appears related to this change: https://www.chromestatus.com/feature/4764225348042752

[masandoval]

The core issue is that Touch.js uses 'ontouchstart' to determine if touch is supported; this is no longer possible in Chrome with the changes in Chrome 70.

I've added some Chrome-specific support to Touch enabling and disabling, and so far everything seems to be fixed for my implementation. This will be my first attempt at creating a pull request, but I'll try to share my changes so you can take a look and try them out yourselves.

[masandoval]

After comparing my changes to current master, I noticed my changes to Touch.js weren't fully up-to-date. If I use the master branch and point to easeljs-NEXT, my issue is resolved. This seems like a feasible work-around until 1.0.3 is released.

[amihanya]

thanks! we wait yo 1.0.3 :)

[lannymcnie]

Sounds like this is solved with the latest NEXT version. We are hoping to do a dot-release in the very near future that rolls up the fixes and updates from the last 6 months.

I will leave this open as a reminder.

[danzen]

Hi @masandoval... can you please describe what changes you did to make pressmove work on newer laptop touchscreens - I have had reports of MS Surface and the new HP laptop touch screens in both Safari and Chrome not working for pressmove. The code that you added above (#997 (comment)) we tried and it still does not work properly - it sort of stutters along. I am testing with this page: https://zimjs.com/explore/drag2.html. Or @lannymcnie if more than what was posted went into the NEXT version, could you point to where I can find that - I checked NEXT but did not see it - maybe I am looking in the wrong place or for the wrong thing. Thanks. I would like to apply a patch if possible to some older libraries to make existing content work. Thanks.

[masandoval]

@danzen I didn't end up applying any changes to CreateJS to fix my issue, other than updating to use EaselJS/master instead of v1.0.2.

My hunch is the changes to fix IE/Edge Pointer events also managed to catch this case, although I haven't done extensive testing to determine which specific commits between v1.0.2 and current master fix the issue. You might look at the following changes to Touch.js:

• bb33989
• 8fd7119
• 848dcbf