Pritam Banerjee Pritam Banerjee - 2 years ago 92
Javascript Question

How to get touch events working in chromium portable running in windows surface?

This is what I am using to trigger the touch events :

var eventMap = {};

var eventReplacement = {
"mousedown": ["touchstart mousedown", "mousedown" , "pointerdown"],
"mouseup": ["touchend mouseup", "mouseup", "pointerup"],
"click": ["touchstart click", "click"],
"mousemove": ["touchmove mousemove", "mousemove", "pointermove"]

for (i in eventReplacement) {
if (typeof window["on" + eventReplacement[i][0]] == "object") {
eventMap[i] = eventReplacement[i][0];
else {
eventMap[i] = eventReplacement[i][1];

Then I use it as following:

$(genderSlider.pointer).on(eventMap.mousedown, setOffset);
$(genderSlider.pointer).on(eventMap.mousemove, fnMoveSlider);
$(genderSlider.pointer).on(eventMap.mouseup, function(event){event.preventDefault(); $("-webkit-opacity", "0.5");usingSlider = false});

Then the callback methods look somewhat like this :

function setOffset(event){

var touch = '';
if (event.type == 'mousedown'){
usingSlider = true;
touch = event;
} else {
usingSlider = true;
touch = event.originalEvent.touches[0];

var ypos = touch.pageY; // Get Y Coordinate
$("-webkit-opacity", "1.0");
offset = parseFloat(ypos) - parseFloat(;

refObj = {};

if( === $(genderSlider.pointer).attr("id")){
refObj = genderSlider;

Things are working fine for mouse events. But for touch events the alert shows as mousevents. Tried
touch-action: none
as well. But does not work

Can anybody suggest what should I try?

Answer Source

I finally made it work. May be useful for the future readers.

The solution was actually way easier than I actually perceived it to be. Does not make much sense though, but it actually works.

The solution was the following:

Wrote the method for two types of events separately, so it looked like:

$(genderSlider.pointer).on("mousedown", setOffset);
$(genderSlider.pointer).on("mousemove", fnMoveSlider);
$(genderSlider.pointer).on("mouseup", function(event)    {event.preventDefault(); $("-webkit-opacity", "0.5");usingSlider = false});

And again for touch :

$(genderSlider.pointer).on("touchstart", setOffsetForTouch);
$(genderSlider.pointer).on("touchmove", fnMoveSliderForTouch);
$(genderSlider.pointer).on("touchend", function(event)    {event.preventDefault(); $("-webkit-opacity", "0.5");usingSlider = false});

Then wrote the callback events separately to handle the cases differently.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download