Chromium how to convert drag and or hold to click?

Question

I'm looking for the best practices with regard to Chromium that would allow me to convert either a "drag" event or a "hold" event into a "click" event.

I'm building a touch screen application that runs on a TS-7990 touchscreen that is giving me fits mainly because the users have a tendency to hit the buttons on an angle which registers as a "drag" event as opposed to a "click" event. I'm using ExtJS 6.2 for this, but I would LOVE to have a solution that involves a few Chromium switches, perhaps in order to make the changes global and sweeping for this device. Any ideas?

Answer 1

So, my discovery is that I could fix this with just a few lines of code in ExtJS.

Ext.define('override.event.gesture.Tap', {
    override: 'Ext.event.gesture.Tap'
}, function (Tap) {
    Tap.instance.setMoveDistance(4000);
});

By setting the move distance to 4000, I am basically saying, "If your drag is less than 4000, treat it as a "click". Previously the value was set to 8 pixels. Which any ham fisted engineer would be able to provide with a glancing blow to the touch screen.

Answer 2

For a solution that 'involves a few Chromium switches' as you mentioned, you need to enable Chromium's touch events, then convert the touchmove event into a click event.

• turn on chromium's touch events when it starts

  start chromium with chromium-browser --touch-events=enabled

  This gives you touchstart, touchmove, touchstop, and touchcancel events. See MDN Touch Events for a great explanation.

• set a flag in your JavaScript code (maybe in index.html) when these touch events exist

  var isTouchDevice = 'ontouchstart' in document.documentElement;

• when this flag is true, intercept the 'drag' and do a 'click' instead. This is one simple way to accomplish that:

if (isTouchEvent) {
    document.ontouchmove = function (e) {
        e.target.click();
    }
}