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?

You may want to look at `Ext.event.gesture.Drag.minDistance`. The default is `8`, maybe if you up that number a bit it may be more appropriate for your use case. — Evan Trimboli, Jan 05 '17 at 00:17

score 1 · Answer 1 · answered Jan 06 '17 at 17:00

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.

score 0 · Answer 2 · answered Jul 19 '17 at 20:16

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();
    }
}

Chromium how to convert drag and or hold to click?

2 Answers2