[SOLVED] simulate touch events for html5

simulate touch events for html5

I am building an html5 game and I would like to send multi touch events to the browser programmatically.

My idea is to setup a node server and forward the events to the webpage. Is there any library that already does this or could I simulate such events?

For example this page is multi touch enabled but on the desktop you can't interact as there is only mouse. If I could simulate the events, then I can interact with the objects. I am looking for something like this... Any pointers are helpful...

I tried using ::

var e = document.createEvent('UIEvent');
e.initUIEvent('touchstart', true, true);
e.touches = [{pageX: x, pageY: y}];

I got no response with the above and then I used this

var e = document.createEvent('TouchEvent');
e.touches = [{pageX: x, pageY: y}];

I get an error if I am not in mobile emulation mode but when I move to mobile emulation mode I get no response

I also tried :: this with no luck

Update

From here

var type = 'move'; // or start, end
var event = document.createEvent('TouchEvent');
event.initEvent('touch' + type, true, true);     
event.constructor.name; // Event (not TouchEvent)

var point = {x: 10, y: 10 };
event.touches = [{
    identifier: Date.now() + i,
    pageX: x,
    pageY: y,
    screenX: x,
    screenY: y,
    clientX: x,
    clientY: y
}, {  identifier: Date.now() + i,
    pageX: point.x,
    pageY: point.y,
    screenX: point.x,
    screenY: point.y,
    clientX: point.x,
    clientY: point.y}]

    dispatchEvent(event);

This worked but only in mobile emulation mode

With this a touch event is raised but with a real touch I have the following data

TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: TouchList…}

But with the custom event the changedTouches element null and yes I tried setting the e.touches to e.changedTouches

TouchEvent {metaKey: false, altKey: false, shiftKey: false, ctrlKey: false, changedTouches: null…}

Solution

From How do I programmatically create a TouchEvent in Chrome 41?:

var type = "move"; // or start, end
var event = document.createEvent("Event");
event.initEvent("touch" + type, true, true);
event.constructor.name; // Event (not TouchEvent)

var point = { x: 10, y: 10 };
event.touches = [
  {
    identifier: Date.now() + i,
    pageX: x,
    pageY: y,
    screenX: x,
    screenY: y,
    clientX: x,
    clientY: y,
  },
  {
    identifier: Date.now() + i,
    pageX: point.x,
    pageY: point.y,
    screenX: point.x,
    screenY: point.y,
    clientX: point.x,
    clientY: point.y,
  },
];

dispatchEvent(event);

This worked but only in mobile emulation mode