[DISCUSS] To find better solutions for detecting touchable device

Brief

There are some issues reporting echarts can’t detect properly whether touch-screen device supports touch events or not.

• #7406
• #9301
• #12166
• #12823

The current detection way in zrender/src/core/env.js is not enough compatible with all kinds of devices.

And I searched on StackOverflow, but it seems there is no the best way.

Therefore, for more compatibilities, should we allow the developer to configure it manually according to what they know about their devices? For example, we may add a new option into zrender and echarts to specify whether the touch event is supported. I have no such touchable device to test these, though.

ECharts

var zr = this._zr = zrender.init(dom, {
    renderer: opts.renderer || defaultRenderer,
    devicePixelRatio: opts.devicePixelRatio,
    width: opts.width,
    height: opts.height,
    touchEventsSupported: opts.touchEventsSupported
});

ZRender overrides env.touchEventsSupported if developer has specified manually

if (opts.touchEventsSupported != null) {
    env.touchEventsSupported = !!opts.touchEventsSupported;
}

Maybe this looks a bit weird. Of course, it would be better if there could be a good way to detect the touchable device.

Others

In highcharts, it uses /(Mobile|Android|Windows Phone)/.test(navigator.userAgent) to judge isTouchDevice and uses window.TouchEvent to judge hasTouch.

[dr-itz]

We had the same problem on some Windows touch devices. Since we use custom imports with webpack, I added this one for testing (typescript):

import zRenderEnv from 'zrender/lib/core/env';
zRenderEnv.touchEventsSupported = true;

this works nicely and touch is fixed on these devices. The question: Is there any downside in force-enabling this?

[jzeron]

Microsoft Surface Hub we had to disable pointerEventsSupported in addition to enabling touchEventsSupported:

import zRenderEnv from 'zrender/lib/core/env';
zRenderEnv.touchEventsSupported = true;
zRenderEnv.pointerEventsSupported = false;