Treat Document Level Touch Event Listeners as Passive

[khmyznikov]

Version

1.7.3

Test Case

http://fabricjs.com/touch-events

Steps to reproduce

Pick up any modern Android with latest Chrome
Open remote Debug
Drag a dog in Demo
See Console warnings

Expected Behavior

preventDefault not ignored

Actual Behavior

preventDefault was ignored

https://www.chromestatus.com/features/5093566007214080

[khmyznikov]

Possible fix:

    addListener: function (element, eventName, handler, options) {
        element.addEventListener(eventName, handler, options);
    },

    _onMouseDown: function (e) {
        this.__onMouseDown(e);

        var addListener = this.addListener;
        var removeListener = this.removeListener;

        addListener(fabric.document, 'touchend', this._onMouseUp);
        addListener(fabric.document, 'touchmove', this._onMouseMove, {passive: false});

        removeListener(this.upperCanvasEl, 'mousemove', this._onMouseMove);
        removeListener(this.upperCanvasEl, 'touchmove', this._onMouseMove);

        if (e.type === 'touchstart') {
            // Unbind mousedown to prevent double triggers from touch devices
            removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
        }
        else {
            addListener(fabric.document, 'mouseup', this._onMouseUp);
            addListener(fabric.document, 'mousemove', this._onMouseMove);
        }
    }

[asturur]

i m a bit out of sync with the touch events since i do not have any modern tablet and i do not want to bother with my phone.

From the lint you posted they say that is behind a flag in current chrome. And will be enabled in 56.
So what is latest chrome for you? for me is 55.

[khmyznikov]

@asturur I'm always use DEV Chrome on mobile, because i should be ready for future "surprises". Yes it's behind a flag for now, but it should be enabled by default in Chrome 56, and i think we should be ready, 56 version will be released in January, very soon.

[asturur]

Can you explain better all the thing here? i read all the small link. i figured out is about prevent default. i then looked at the possible fix and i see { passive: false }. did you change anything else?

do you have some suggestion to handle some other events? or some suggestion about touch events?

[khmyznikov]

@asturur need to add a passing options possibility to element.addEventListener(eventName, handler, options), and pass { passive: false } to event, who prevent another event, like touch scroll canvas:

_onMouseMove: function (e) {
!this.allowTouchScrolling && e.preventDefault && e.preventDefault();
this.__onMouseMove(e);
};

If don't, in new Chrome 56 you can't prevent touchScrolling.

[RByers]

Sorry for the trouble, this is a breaking change in Chrome 56 to improve scroll performance. Note that your fix won't work correctly on browsers that don't support passing options to addEventListener because you didn't use feature detection. A better solution is generally to add an appropriate touch-action CSS rule to disable scrolling/zooming where appropriate (which is necessary to work correctly with touch on IE/Edge anyway).

[asturur]

so touch-action is in place.
the object with option is supported from chrome 51 and firefox also from some versions.
for IE we have a detection and we pass false. worst case scenario we use usecapture as true.

What else is missing?

[RByers]

Using the above demo, I don't see a touch-action rule anywhere on the page. If I add a rule like:

.canvas-container {
  touch-action: none;
}

Then the console errors indeed go away (although I don't see the picture actually drag around - just a bunch of Dragging written to the log, but that's what happens for mouse too so I assume that's a separate issue with the demo page).

[asturur]

i swear i added it. i guess i did to the wrong element. does upperCanvas have it?

[asturur]

oh that page is based on 1.5.0
needs an update.